Extracting Web Colors from Photographs

Have you ever come across a website where the colors of the page are based on the photograph being displayed? Here are some examples of what I mean:

color2

color1

color3

Notice how the background color of the gallery isn’t fixed, but instead depends on the dominant color in the particular photograph being displayed. Now, you could use the colors extracted from photographs for a variety of purposes depending on your level of expertise and the purposes you have in mind.

In this post I’ll briefly cover a few ways you can extract useful web colors from your photos.

The Color extract PHP Class

Difficulty: Hard

colorextractIf web development is you’re thing, and you’re comfortable with PHP, there’s a great PHP class over at phpclasses.org that you can download called Color extract.

Download it, upload it to your web server, include the class in your PHP file, and it can turn an image file path that you give it into an array of the most dominant color tones that appear in your photograph.

You can then use these color tones however you’d like. In the examples above, I simply took the most dominant color tone, as determined by Color extract, and used it as the background color for each page.

Though this is one of the more difficult ways to extract colors from your photographs, you can use it to make your web pages dynamic, automatically setting the background colors based on the colors in your photographs.

Similar classes or functions probably exist for your scripting/programming language of choice. Just do a Google search to find them!

Manual Extraction

Difficulty: Medium

A second way you can extract web (hex) colors from your photos is by eyeballing it and doing it manually. If you have Photoshop, you can use the eyedropper tool to select a color, and then open up the color picker to view the hex color code of that color.

photoshoppicker

Most image editing programs should have a way for you to view the hex color of selected colors. Another option for manual extraction is to use a lightweight program designed specifically for extracting colors. Do a quick search on download.com for “color picker“, and you’ll find what you need for your operating system.

The downside to this method is that it might be more difficult to find a suitable color that works well, since colors can differ greatly from pixel to pixel. On the other hand it gives you a much greater degree of flexibility in choosing the color you’d like, since automated methods often fail when the color distribution in photographs is abnormal/non-uniform.

ColorSuckr

Difficulty: Easy

colorsuckr

Finally, there’s quite a few web services that are more than happy to do all the work for you. ColorSuckr is one such service. All you need to do is enter the URL of the image you’d like suckr the colors from, and the service will return the hex color codes of the dominant colors.

If you extract web colors from your photographs in ways I didn’t mention in this article, please share it with us in the comments!

Discussion