Here’s an interesting clip of a color film test done by Kodak in 1922, years before color movies started appearing. This is 13 years before the first full-length color film appeared, and 7 years before the first Oscar was awarded. You can read more about this clip on the Kodak blog.
Read the rest of this entry »
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:
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.
Difficulty: Hard
If 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!
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.
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.
Difficulty: Easy
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!
When I first started using Adobe Camera Raw, one of the options I experimented with was which color space the resulting JPEG should be in. Not thinking it mattered, I selected “Adobe RGB (1998)”. However, a few days later I suddenly realized that the images looked different in a browser than when I had saved them in Photoshop. The once rich and vibrant colors were gone, and what I saw were images that were washed out and desaturated. After looking into why this happened, I found out that the problem had to do with color space.
So what is a color space anyway? Basically, it’s a specific range of colors that can be represented. JPEG images offer the same number colors no matter what color space you use, with the difference being the range of the colors that can be represented. In other words, sRGB can represent the same number of colors as Adobe RGB, but the range of colors that it represents is narrower. Adobe RGB has a wider range of possible colors, but the difference between individual colors is bigger than in sRGB.
To illustrate this, I’ll use a simplified example. Suppose my color space consisted only of blue, and I could have a total of 3 possible colors. Lets say I chose to use the following “color space”:
Now, maybe I would like a wider range of colors to work with for one reason or another. Though I can’t increase the number of colors I can represent, I can increase the range by spreading the colors farther apart. The resulting color space might look something like this:
Notice how I was able to capture a wider range (or gamut) of possible colors without increasing the number of colors. In both “color spaces”, I’m limited to 3 colors.
In the same way, Adobe RGB captures the same number of colors as sRGB but offers a wider range of colors by spreading the colors out more.
sRGB is pretty much the default color space everywhere you look. This means that most browsers, applications, and devices are designed to work with sRGB, and assume that images are in the sRGB color space. In fact, most browser simply ignore the embedded color space information in images and render them as sRGB images.
Pros
Cons
As I explained earlier, Adobe RGB represents a wider range of possible colors using the same amount of information as sRGB by making the colors more spaced out. Since sRGB has a narrower range of colors than Adobe RGB, it cannot display certain highly saturated colors that could still be useful in certain applications, such as professional-grade printing. Thus, photographers and graphic artists that need this extra color range for specific purposes would choose Adobe RGB over sRGB.
Pros
Cons
First of all, if you publish your images on the web, you should always save and publish them as sRGB. This is because most browsers will render images as sRGB regardless of what you save it as, causing Adobe RGB images to appear desaturated and washed out (the problem I was experiencing). Thus, if you want your images to look the same regardless of where it’s being displayed, you should always publish them as sRGB. This makes it so what you see when you save is what you get when it’s displayed.
Thus, the question becomes, “what color space should I work with and save images as?”. This is more tricky, and generally depends on your workflow and what you use your images for.
If you work with 16-bit images and need the extra color range (or gamut) for professional-grade printing, then you should save your images in Adobe RGB. This preserves the extra color information that would be lost if you saved as sRGB, just like the extra information in RAW files is lost if you save them as JPEGs. In this case, it’s not the amount of data that’s lost, but the range of colors.
If you might need the wider range offered by Adobe RGB anytime in the future, then you should work with and save your images in Adobe RGB. If you save your images as sRGB, you cannot convert it to Adobe RGB in the future to obtain the wider range of colors.
However, the advantage of working in sRGB is that it simplifies your workflow. You don’t need to worry about color spaces at all if you’re only going to publish your images to your Flickr or personal photoblog. All you need to do is save the sRGB images and upload them to the web, and they will look fine.
Unless you know specifically you want to work in Adobe RGB, make sure all your devices and programs are set to work in sRGB. Otherwise, you might find out one day that your images look horrible on other people’s browsers! I found this out the hard way.
Image credit: Clock Study #4 by David H-W (Extrajection).
Join the PetaPixel Flickr Group
Follow @petapixel on Twitter