"Rounding" colour values to the nearest of a small set of colours

Question

Preamble

As a part of a project I'm working on I am trying to provide a convenient way to search for images in our system. We currently provide searching by various types of user added metadata (e.g. title, description, keywords) and by various metadata which we extract (e.g. EXIF, IPTC, XMP, etc). I would also like to add a "colour search" similar to what you can see in google's image search.

The project uses PHP and we can use the Imagemagick extension to segment and quantize the image and extract the most "significant" colours from the image; I'm not entirely certain of the results I'm getting here, but they seem reasonably accurate and certainly better than nothing.

The Problem

The bit that I'm having difficulty on is converting these significant colours into a set of representative colours, e.g. when you look at Google's image search there is a set of 12 colours there. I'd like to mathematically "round" my colour value to the nearest representative colour, so that I can index the image with the colours that I detect and then facet my search results that way.

Any suggestions?

Answer 1

This is a rough idea only - you will need to tweak it to your own needs.

Basically, I thought that, as colors are recorded as RGB, either as a Hex string "#000000" to "#ffffff", or as an RGB set "rgb(0,0,0)" to "rgb(255,255,255)", and these are interchangeable/translateable, this is a simple mathematical rounding issue.

In the full range of colors there would be (16*16)*(16*16)*(16*16) = 256*256*256 = 16,777,216 possible colors.

Rounding colors to their closest single character Hex value reduces that to 16*16*16 = 4,096 possible colors. Still far too many, but getting closer.

Rounding colors to a single character value, but then limiting that further to being one of 4 (0,3,7,f) reduces it to 4*4*4 = 32. Close enough for me.

So, I built a very basic PHP function to try and achieve this:

function coloround( $incolor ){
  $inR = hexdec( $incolor{0}.$incolor{1} )+1;
  $inG = hexdec( $incolor{2}.$incolor{3} )+1;
  $inB = hexdec( $incolor{4}.$incolor{5} )+1;
 # Round from 256 values to 16
  $outR = round( $outR/16 );
  $outG = round( $outG/16 );
  $outB = round( $outB/16 );
 # Round from 16 to 4
  $outR = round( $outR/4 );
  $outG = round( $outG/4 );
  $outB = round( $outB/4 );
 # Translate to Hex
  $outR = dechex( max( 0 , $outR*4-1 ) );
  $outG = dechex( max( 0 , $outG*4-1 ) );
  $outB = dechex( max( 0 , $outB*4-1 ) );
 # Output
  echo sprintf( '<span style="background-color:#%s;padding:0 10px;"></span> &gt; <span style="background-color:#%s;padding:0 10px;"></span>%s has been rounded to %s<br>' ,
         $incolor , $outR.$outG.$outB ,
         $incolor , $outR.$outG.$outB );
}

This function, when passed a hex string, echos a sample of the original color and a sample of the abbreviated color.

This is just a basic proof-of-concept, as I do not know the format Imagemagick is returning the colors as, but you may be able to utilise this logic to create your own.

From those 32 colors then, you could group the similar (there would probably be about 8 shades of grey in there) and name the remainder to allow your users to search by them.