How to map a range of hex values to a color

Question

I need to get the most dominant color in an image and succeeded in finding the hex value(RGB) corresponding to it. The next thing is to map hex values to common colors (like red,yellow,green,blue,purple,pink,white,grey,black,brown etc). So basically what I need is a way to map range of hex values to a particular color. For example #ff5050, #ff1a1a, #e60000 etc are red. So if #ff5050 is given as input the result must be red. In this way all hex values must be matched to some common colors that was mentioned above. How can one achieve this?

The programming language that I prefer is php.

Answer 1

Or more engineering approach. Devide RGB space into 8 subspaces and make color name approximation. Then you just need to find out in which subspace your color is.

$colorNames = array(
      array(
          array(
            'black', // 0 0 0
            'blue'   // 0 0 1
          ),
          array(
            'green', // 0 1 0 
            'cyan'   // 0 1 1
          )
      ),
      array(
          array(
            'red',   // 1 0 0
            'violet' // 1 0 1
          ),
          array(
            'yellow',// 1 1 0 
            'white'  // 1 1 1
          )
      )
  );

function GetColorName($r, $g, $b)
{
    global $colorNames;
    echo $r_appx = (int)($r/0x80);
    echo $g_appx = (int)($g/0x80);
    echo $b_appx = (int)($b/0x80);

    return $colorNames[$r_appx][$g_appx][$b_appx];
}

echo GetColorName(0xAA,0x40,0x40); // red
echo GetColorName(0x40,0xAA,0x40); // green
echo GetColorName(0x40,0x40,0xAA); // blue
echo GetColorName(0xAA,0x40,0xAA); // violet
echo GetColorName(0xAA,0xAA,0x40); // yellow
echo GetColorName(0x00,0xAA,0xAA); // cyan
echo GetColorName(0x40,0x40,0x40); // black
echo GetColorName(0xAA,0xAA,0xAA); // white

Similarly you can easily devide RGB space into 27 subspaces if you need more colors.

Answer 2

You can get picture histogram in PHP. You can find more info and code example here: http://php.net/manual/en/imagick.getimagehistogram.php

To map your color to html name, you can go through the array of colors and calculate color distance with color you are looking for. The color with the smallest distance is the one which will give the best html name. You can find more resources about color distance here: https://en.m.wikipedia.org/wiki/Color_difference

This might take huge amount of time every time you process every new picture so BETTER SOLUTION: You are in RGB color space. This means you have 256x256x256 different colors. Each color is defined by RGB coordinates - http://www.w3schools.com/colors/colors_names.asp. For examle 'aqua' has RGB coordinates (0,255,255). Your goal is to name all colors in RGB space by a name, but you dont need unique name for very single color in RGB space because you are not able to distinguish every detail by your eye (for example (0,0,1) and (0,0,2) would look the same). Therefore you specify a list of color names you want:

$colorNames = array(
  [0] => 'white', //#FFFFFF
  [1] => 'red',   //#FF0000
  ...
);

Now, for quick mapping of color C, given by coordinates (r,g,b), to color name, you have to lookup, what index in $colorNames array corresponds to color C. For this, you can prepare a file in advance, which has size of 256*256*256 = 16MB. Each byte represents one point in RGB space. The value of the byte is the index of color in $colorNames array to which the color is similar the most. How to create the file (pseudo code):

for every value of R coordinate
    for every value of G coordinate
        for every value of B coordinate
            find which color name in $colorName has the smallest distance to coordinates (R,G,B) 
            store the index for this color name to file

Now you have file which holds all indexes for any color. This means that all you have to do now, to map any color to name, is read one byte in this file and look into the array for the name of the color.

open mapping file
read one byte on position (R*256*256 + G*256 + B)
this byte is the 'index' in colorNames array
read the color name (colorNames['index'])