Does anyone know of a way of taking two hex colour values and returning some kind of index to say how similar the colours are? e.g two shades of yellow might return a higher index i.e they are more similar than say a grey and yellow?
(Im using javascript but guess something like this would be a language independent formula/algorithm)
Hex color codes start with a pound sign or hashtag (#) and are followed by six letters and/or numbers. The first two letters/numbers refer to red, the next two refer to green, and the last two refer to blue. The color values are defined in values between 00 and FF (instead of from 0 to 255 in RGB).
There is no informational difference between RGB and HEX colors; they are simply different ways of communicating the same thing – a red, green, and blue color value.
HTML color codes are hexadecimal triplets representing the colors red, green, and blue (#RRGGBB). For example, in the color red, the color code is #FF0000, which is '255' red, '0' green, and '0' blue. There are 16,777,216 possible HTML color codes, and all are visible on a 24-bit display.
Designers and developers use HEX colors in web design. A HEX color is expressed as a six-digit combination of numbers and letters defined by its mix of red, green and blue (RGB). Basically, a HEX color code is shorthand for its RGB values with a little conversion gymnastics in between. No need to sweat the conversion.
Here could be an algorithm to start with:
const yellow1 = "FFFF99";
const yellow2 = "FFFF00";
const blue = "0000FF";
function hexColorDelta(hex1, hex2) {
// get red/green/blue int values of hex1
var r1 = parseInt(hex1.substring(0, 2), 16);
var g1 = parseInt(hex1.substring(2, 4), 16);
var b1 = parseInt(hex1.substring(4, 6), 16);
// get red/green/blue int values of hex2
var r2 = parseInt(hex2.substring(0, 2), 16);
var g2 = parseInt(hex2.substring(2, 4), 16);
var b2 = parseInt(hex2.substring(4, 6), 16);
// calculate differences between reds, greens and blues
var r = 255 - Math.abs(r1 - r2);
var g = 255 - Math.abs(g1 - g2);
var b = 255 - Math.abs(b1 - b2);
// limit differences between 0 and 1
r /= 255;
g /= 255;
b /= 255;
// 0 means opposite colors, 1 means same colors
return (r + g + b) / 3;
}
console.log(hexColorDelta(yellow1, yellow2)); // 0.7999999999999999
console.log(hexColorDelta(yellow1, blue)); // 0.19999999999999998
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With