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.

Name That Color

One Response to “Name That Color”