4

The following hex values would all probably be considered "red" by the layman's eye:

enter image description here

Is there a way, using only the hex code, to determine which basic color a given color is most similar to? I would like to be able to do this for red, blue, green, yellow, green, purple, brown, pink, black, and white as well.

migrated from ux.stackexchange.com Jun 9 '17 at 13:50

This question came from our site for user experience researchers and experts.

  • 1
    I suggest you read the xkcd color survey and you will understand that this is not only hard but impossiblr to get people to agree. – joojaa Jun 9 '17 at 16:29
  • 1
    This question was already asked on the sister side "code golf". They can display a human readable name for a color code. But please notice that this is a popularity contest so people are going to pull all sort of weird strings to get cool effects. You might not want to copy their implementatiok but i think it sets you in the correct track. – BlueWizard Jun 10 '17 at 7:09
5

You'll have to define what 'closest' means and what your target colors are. Color can be thought of as a cube, a cylinder, and many other shapes, and your goal is essentially to find the closest color within that 3 dimensional shape.

If you restrict yourself to only the primary colors, then the most straightforward manner would be to convert your colors to the HSV colorspace.

Adding in pink makes it a bit trickier, because in HSV Pink and red would have the same hue. Now you would have to factor in the luminance/value. You could do a two stage process where you only compare the luminance between two target colors of the same hue.

A similar test would take place for white and black. In HSV, whites and blacks can have bizzarely varying hues, so you would want to ignore the hue when testing for that.

With that all said, you may be able to take the square root of the sums of differences in RGB channels between your sample and a target, use that as a measure of distance, and compare all your targets and select the one with the minimum distance. Computing the distances in difference color spaces may yield different result characteristics.

4

If I understand the question I would say "Of course." You simply need to become more familiar with the hex. But this only works so far.

You know that FF 00 00 is 100% red and zero green and blue. As you decrease the intensity of the FF the shade darkens.

Color is understood better than numbers in the same way that a graph works better than a column of numbers. We intellectually understand what a hex number or table of numbers means but our minds grasp colors and charts on a whole other level.

The real question would be how necessary would it be know hex code past the R - G - B and darker and lighter. It's faster and easier using a color picker.

4

I don't think this is possible. You'd need to define what "red, blue, green, purple, brown, pink" mean. Because they mean different things to every person you would ask.

The only constants there are black and white. Black is always black. White is always white. There's no room for a different interpretation of what "black" is.

All the other colors have tints and shades are are never a constant. Therefore you can't define a universal constant when there is none.

You can choose the constants you want for those colors. But those can be completely inaccurate for anyone else. You may see "red" as always #ff0000... I personally think #aa0000 is a better red...

You just can't determine universal definitions of inherently ambiguous terms.

  • Sure there's room for different interpretations of black and white, just like with any other colour. Just like I think everyone will agree that #FF0000 is red, so everyone will agree on #000000 and #FFFFFF. But what about #0D0D0D? Is that black, or just really dark grey? – Janus Bahs Jacquet Jun 9 '17 at 16:44
  • In Hex.. anything not #000000 and #FFFFFF is a tint of grey or a color. Even if it's almost visually indiscernible from black/white (which really is a result of monitor calibration more than anything). -- > :) Can you spot the #0D0D0D square against the #000000 backing?? – Scott Jun 9 '17 at 16:48
  • Yes, if we’re going by purely numeric or mathematic definitions. Anything that is not #FF0000 is not red, either. The point is that this is about human-eye perception, and just like we identify much more than just #FF0000 as ‘red’, we also identify much more than just #000000 and #FFFFFF as ‘black’ and ‘white’, and most people will have different tint cutoffs for them. It’s not that there are only two constants, but rather that there are no constants for something like this, not even black or white. – Janus Bahs Jacquet Jun 9 '17 at 16:53
  • I can see that point. But I feel hex uniform values are somewhat more constant. Primarily because when all 6 digits are the same... it's either black, white, or grey. You can argue that 0D0D0D is a "black" but it is not because the hex digits are not the same. It is that reason I state black and white are constants. But I conceded some may call a color "black" that is not actually black. You generally can't transpose that sentiment to other colors however. Everyone agrees red is red... but they won't ever agree on the hex definition of red. – Scott Jun 9 '17 at 16:57
  • I absolutely see your point though. – Scott Jun 9 '17 at 17:02
1

No, because human eyes vary

Since you are asking how the color would be perceived (instead of its mathematical value) the answer is, this would be too problematic, since people (even those with "normal" color vision) perceive colors differently.

Try this test. This test and others like it show that what people perceive as orange and yellow has no "bright line" - the line between yellow and orange is different, not as a matter of taste, but physiologically, for different people.

  • Interesting test. I got 7/7 right, but it took ages to find the edges of #6, and I couldn't see the faintest bit of difference in the last one—pure guesswork. – Janus Bahs Jacquet Jun 9 '17 at 22:14
1

I found a related answer here. Using the colors from the fifth row of this color table, and the names from this "Name that color" website, and the algorithm from the above answer, I wrote the following script, hexcode-rounding.php:

<?php

function distance_3d($rgb_1, $rgb_2) {
  return sqrt(pow($rgb_1[0] - $rgb_2[0], 2) +
              pow($rgb_1[1] - $rgb_2[1], 2) +
              pow($rgb_1[2] - $rgb_2[2], 2));
}

if (isset($_POST["hexcode"])) {
  $hexcode = $_POST["hexcode"];
  $r = hexdec(substr($hexcode, 0, 2));
  $g = hexdec(substr($hexcode, 2, 2));
  $b = hexdec(substr($hexcode, 4, 2));
  $rgb = [$r, $g, $b];

  $basic_colors = [
    'black' => [0, 0, 0],
    'white' => [255, 255, 255],
    'red' => [255, 0, 0],
    'orange' => [255, 128, 0],
    'yellow' => [255, 255, 0],
    'chartreuse' => [128, 255, 0],
    'green' => [0, 255, 0],
    'spring green' => [0, 255, 128],
    'cyan' => [0, 255, 255],
    'azure' => [0, 128, 255],
    'blue' => [0, 0, 255],
  ];

  foreach ($basic_colors as $color_name => $color_rgb) {
    echo "<p>$color_name: " . distance_3d($rgb, $color_rgb) . "</p>";
  }

} else {
?>

<form action="hexcode-rounding.php" method="post">
<p>Hex code: <input type="text" name="hexcode" /><br />
<p><input type="submit" value="Round!"></p>
</form>

<?php

}

It prints out a list showing how close the given color is to each "basic" color in three dimensional RGB space. The lowest value in the list is the one that color is closest to. Notably missing are purple, brown, and pink, but it wouldn't be hard to add those in.

  • This approach has some problems because it treats all three dimensions of the distance as equally important. Given that human vision is logarithmic (not linear), and that we're twice as sensitive to green than to red or blue, you'll end up with some odd mappings. I'd suggest starting with the YUV color space and working from there. – Bevan Jun 9 '17 at 2:45
  • @Bevan why YUV instead of HCL as suggested in the SO question I referenced? – Lincoln Bergeson Jun 9 '17 at 16:13

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.