Get the base colours from a set of hex colours

Question

I have a set of colours and would like to break them down into 10 to 20 base colours.

This should not be a pallet of what is passed in, rather independent of what is passed in. So if an image was used that was just various shades of red, it would return only red, possibly with light / dark red.

EG: the colours I have are the boxes below, with an example of the output as lines. So from 21 colours the list is down to 8 in this example.

The hex values for above:

#000000
#ffffff
#003e9f
#d61517
#00a7bd
#001070
#a0210c
#dc9103
#e6151e
#fdfdfd
#011171
#fbfd10
#ffc500
#fdc605
#e6141d
#faf703
#544b20
#796a3a
#7a6b3a

Final output could be something like the outer ring of this colour wheel

Answer 1

Pick your base colors in advance and make an array - you could use the 12 in the outer ring of the color wheel. Use an associative array as a set for the output: for each input color, find the closest base color and add it as a key to the output array. Then return the keys of that array.

To find color distance, you can just treat the colors as points in three-dimensional space, (x,y,z) = (r,g,b), and use the Euclidian distance. After extracting the components from the hex string, that's just something like this:

$dr = $r2 - $r1; 
$dg = $g2 - $g1; 
$db = $b2 - $b1; 
$dist = sqrt($dr * $dr + $dg * $dg + $db * $db);  

You could do something fancy with octrees if you want, but with a small list of colors just looping over them and finding the smallest distance will work fine.

Answer 2

I think this would be a lot easier to do (and to understand) if you used hsla notation.

If your base colors are always the same, you could define 20 values for your hue parameter (which is basically an angle from 0° to 360°), and group all the different colors you have to the closest 'base color' only with the hue.

If your base colors are dependant on the input (it is not clear in your question), then @Mark Reed's option to find color distance can be done in hsl as well, only with the hue, which would be more accurate to the notion of 'shades of color' IMHO.

NB : A handy tool for hsl : http://mothereffinghsl.com/