How can I tell basic color a hex code is closest to?

Question

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

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.

Answer 1

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.

Answer 2

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.

Answer 3

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.

Answer 4

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.

Answer 5

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.