Mystery Incorporated

Programming, photography, news, culture, and cartoons

home | rss | atom

Add to Google

Name That Color

May 17th, 2014 [programming]

Color PickerHere’s a quick app I wrote to see which colors are being used in an image. But instead of just showing the hex value or RGB decimal values, it also tells you what the name of the color is.

My Color Picker uses the X11 color names, a list of 144 colors that you can use in CSS.

When you open the program, you’ll see a collage of the 144 color samples. You can enter the URL of any image on the Internet, which will replace the collage. As you hover over the image, the program will match the current pixel to the nearest color in the X11 palette. If there isn’t an exact match, it’ll show the nearest match above the actual color codes.

My matching algorithm isn’t ideal; it just sums the differences between two colors’ red, green, and blue values.

The “force to palette” button changes every pixel to its closest match from the palette. After this transformation, every pixel will be an exact match.

I love Javascript, but one of its “security features” can make it difficult to work with. In this case, when I fetch an image from the Internet and load it into the canvas element, I am no longer allowed to read RGB values from the canvas. It throws the error “Unable to get image data from canvas because the canvas has been tainted by cross-origin data.” The canvas element was intentionally designed to become “tainted” when data from another domain has been added. Once tainted, you can no longer extract data from it, including reading a pixel’s RGB values. The justification for this disabling seems to be more to protect images’ copyrights than protecting the user’s security. It’s similar to but not quite the same as the same-origin policy.

Of course there is a workaround. But finding a solution on the Internet proved too difficult, so I had to hobble together my own. Just like with cross-domain API calls, I created a PHP proxy script to return the intended image. So now instead of loading an image with a simple URL like

I have to put the URL in the query string of my proxy script:

I don’t see much of a security threat in this, but just in case, I do at least make sure that the requested image at least has an official “image” mime type (AKA Internet media type). This is the PHP proxy script in its entirety:

$ch = curl_init(); 
curl_setopt($ch, CURLOPT_URL, $_GET["image"]);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
curl_setopt($ch, CURLOPT_CONNECTTIMEOUT, 5);
$data = curl_exec($ch);
$mime = curl_getinfo($ch, CURLINFO_CONTENT_TYPE);
$pieces = explode("/", $mime);
if ($pieces[0] == "image") {
  header("Content-type: " . $mime); 
  echo $data;
  echo "Mime type '" . $mime . "' is not an image" 

Notice the code doesn’t save the image to the file system. It’s just stored in memory as $data and then returned via the echo statement.

Now you can use this online Color Picker app to explore the names of colors in your images. If you’re lucky you’ll discover unusual color names like burlywood, gainsboro, and papaya whip.

One Response to “Name That Color”

  • Susan Gildersleeve says:

    Alors! Enfin je vous ai retrouvé!

    Je n’ai pas vu les figures de bâton depuis I don’t know when, probably 2000? When did they disappear and break my heart… No matter: my round black head explodes in a shower of gore with the joy I feel at seeing them once again. They were what introduced me to the full mad fullness of… Internet. Internet the bliss. Internet the terror. I love you forever for them. Le théâtre du bâton figures was my gateway drug, and as the saying goes, you never forget your first girl.

    I’m sorry: this comment has nothing to do with Name that Color, which I am sure is a superior ap and everyone should use it to discover unusual color names like burlywood, gainsboro, and papaya whip. Wouldn’t it be lovely if someone made some stickfigure animations using these colors? Certainly it would! Who could do that better than anyone else on the whole Internet, I wonder?

    P.S.: Can you bring back the curtains opening/closing thing? Wasn’t there a movie theater animation thingie? O, but ignore me. Ignore me. I feel like the fisherman’s wife asking for ANYTHING at this point. Really, this is like… like going back to a perfect day in one’s early childhood and eating birthday cake. Before all the terrible things came. Before even FACEbook, even! when everything was fresh and new and one was young and life was still possible and all the world was a garden of burlywood papaya whip delights filled with Lileks [pre-9/11 Lileks, before he became unreadable] and Achewood and Metafilter. Je t’aime, monsieur. Vous avez rendu ma vie complète.

  • Leave a reply

Site by M.V. Jantzen
mvs202 "at"