Question

I’m building a tool where i pick the dominant colors from an image and i have done that bit pretty well, the problem i’m facing now is how to combine the returned colors into a broad palette range like the X11 color range http://en.wikipedia.org/wiki/Web_colors#X11_color_names

So for example if i got : Color RGB:rgb(102,102,153), i would want to chalk it up to the purple colors and rgb(51,102,204) to blue and so on and so forth. Now i really can’t figure out how to do this. Is there a library or something i can use or how should i code it? I’m using imagemagick and php btw.

Is it possible to generate an array containing the range of rgb for each base colors and then see if my new color lies in it?

Thanks in advance guys!

Answer 1

OK, forget the previous code, here is a much more reliable version I put together from several sources which also uses the more common 0-360 for hue.

I also added a test little routine that picks random colours then ‘tells’ you what they are!

Seems more reliable, some fiddling might be needed around the cut-off values (especially orange/grey etc). I used this online colour picker for testing.

<?php

function RGBtoHSL($r,$g,$b) {  
// based on code and formulas from:
// http://www.had2know.com/technology/hsl-rgb-color-converter.html
// http://colorgrader.net/index.php/dictionary-a-tutorials/color-theory/93-math-behind-colorspace-conversions-rgb-hsl.html
// http://proto.layer51.com/d.aspx?f=1135


$max = max($r, $g, $b);
$min = min($r, $g, $b);
$d = ($max - $min) / 255;
$lum = round((($max+$min)/2)/255, 2);

$sat = 0;
if ($lum > 0) $sat = round($d/(1 - (2*$lum-1)), 2);

$hue = 0;  
if(($r==$g) && ($g==$b))  $hue = 0;  
else if($r>=$g && $g>=$b) $hue = 60*($g-$b)/($r-$b);  
else if($g>=$r && $r>=$b) $hue = 60  + 60*($g-$r)/($g-$b);  
else if($g>=$b && $b>=$r) $hue = 120 + 60*($b-$r)/($g-$r);  
else if($b>=$g && $g>=$r) $hue = 180 + 60*($b-$g)/($b-$r);  
else if($b>=$r && $r>=$g) $hue = 240 + 60*($r-$g)/($b-$g);  
else if($r>=$b && $b>=$g) $hue = 300 + 60*($r-$b)/($r-$g);  
else $hue = 0;  
$hue = round($hue, 0);  
$hsl = array();
$hsl['h'] = $hue;
$hsl['s'] = $sat;
$hsl['l'] = $lum;
return $hsl;
}  




// example: pick 42 random colours then identify them
echo "<div style='float: left; width: 1000px;'>";

srand;
for ($f=0; $f < 42; $f++) {

$red = rand(0, 255); 
$green = rand(0, 255); 
$blue = rand(0, 255); 

$hsl = RGBtoHSL($red, $green, $blue);

$hue = $hsl['h'];
$sat = $hsl['s'];
$lum = $hsl['l'];

$colour = "Red";            // default to red

if ($hue >= 11 && $hue <= 45) {
$colour = "Orange";
if ($lum < 0.51) $colour = "Brown";
}
if ($hue >= 46 && $hue <= 62) $colour = "Yellow";
if ($hue >= 63 && $hue <= 160) $colour = "Green";
if ($hue >= 161 && $hue <= 262) $colour = "Blue";
if ($hue >= 263 && $hue <= 292) $colour = "Purple";
if ($hue >= 293 && $hue <= 349) $colour = "Pink";
if ($sat < 0.07) $colour = "Grey";  // do grey before black/white
if ($lum < 0.10) $colour = "Black";
if ($lum > 0.97) $colour = "White";

echo "<div style='float: left; width: 150px; border: 1px solid #000000; margin: 5px;'>";      
echo "<div style='float: left; width: 20px; height: 120px; background-color: rgb($red, $green, $blue); margin-right: 10px;'></div>";
echo "<p style='width: 33%; float: left;'>R=$red<br/>G=$green<br/>B=$blue</p>";
echo "<p style='width: 33%; float: right;'>H=$hue<br/>S=$sat<br/>L=$lum</p>";
echo "<p><b>$colour</b></p>";
echo "</div>";
}

echo "</div>";

?>