TECHtata
Color Spaces
Ryan Brenizer
You've been out in the garden shooting flora all day. As you open the images in your editing program, you think, "Boy, these are going to wow some people. Look at these colors! All the wonderful shades; look at all the glorious greens!" You save and upload to the Web in giddy anticipation. And then you open your page to look at the results and … "What?!? Why are my colors muted? What happened to my greens?"
Welcome to the world of color spaces; you've just entered the hard way. This article will try to make it a little easier, by helping you understand a bit about what color spaces are, and more importantly how you can use this knowledge to make your images look the way you want to on the Web.
What is a color space?
Let's say you're trying to paint a room orange with Stereotypical Macho Man. As befitting the stereotype, S.M.M. sees the world only in primary colors. Magenta? Crimson? Maroon? They're all red. You misguidedly send him to the paint store with the following instructions: "OK, we need orange paint. An easy way to get that is to mix red and yellow, so get those colors and we'll mix them here."
S.M.M. comes back with magenta and yellow-ish green, which produce something less warm and friendly and more like something you'd find in a garbage disposal. So you wisen up: You get a color wheel that shows specific colors next to specific serial numbers for paint, and send him off to pick up the exact color. Happiness ensues.
If you understand that story, you understand the basics of color spaces. There are a lot of sites out there that will help you understand the exact science of color spaces down to mathematical detail. Some of them are listed in the sidebar. Very little of that is needed to fix your poor garden photos, though, so we'll stick to basics here. A color space is a theoretical system that allows you to describe a great many colors in terms of a few values. Red + Yellow = Orange is an equation that lives within a color space, specifically the Red, Blue, Yelllow color space you learn in art class. But there are other color spaces. Monitors and televisions tend to express colors in terms of RGB (Red, Green, and Blue). Color newspaper presses and many other printers express colors in CMYK ( C yan, M agenta, Y ellow, and, just to mess with your head, blac K ).
We're dealing in the world of computer monitors, though, so let's just focus on RGB. Computers, like Stereotypical Macho Male, can't really do much with the term "red" -- for accurate results, they need precise values to go by. So people have gotten together to hash our absolute color spaces , systems that can describe color in precise terms. Yes, a bunch of very smart people got together to discuss what "red" really is.
So what's the problem? Well, the article is Understanding Color Spaces , not Understanding The One and Only Color Space. The Web uses a color space called sRGB, which is basically a lowest-common-denominator space -- you never know what kind of monitor will view your pictures, so this color space is a narrow range (particularly in the greens) that most monitors can display. Of course, the human eye has a bigger range than any monitor, so for printing purposes other color spaces have been invented -- the most famous of these is Adobe RGB (1998), by the people who brought you Photoshop, but there are other ones, such as ProPhoto RGB, that have a wider range of colors than even the human eye can see! There are many, many color spaces, but for this article we will just focus on these three — the first two because they are the spaces that most digital cameras use, and the last because it is so extreme that it will help bring the concepts into focus.
So what's the problem? Adobe and ProPhoto are bigger color spaces, so they must be more awesome, right? Wrong. Most browsers cannot speak the language of color spaces other than sRGB, so they get a lot of the color simply wrong. Take the following photo:
This picture has both a colorful background and skin tones, so any color inaccuracies will be readily apparent. If you upload in another color space, some browsers (generally only Apple's Safari and other browsers based on its rendering system, such as OmniWeb) will understand it just fine as the following screenshot from OmniWeb shows:
Most browsers, however, will make a mess of it, such as the popular Firefox, as shown below:
You can see the problems here: First, the pictures look different from what you saw in your editing program. Second, the pictures look radically different in different broswers, so if you say "I'll fix the problem by saturating the image more!" people seeing your site on Safari will wonder if someone let loose the crayons on your pictures.
Now the real mind-blowing part? There are even different sRGBs. Shooting in sRGB will help for Web publishing, but the only way to get near-perfect results is to deliberately convert the image in your editing program. So here's how:
1. Separate a "web copy."
Presenting for the Web and printing are different, and if you're using JPEGs, any changes you make will be things you can never get back … unless you save a copy of the original. Many image management programs do this for you, but it's easy enough to do yourself. If you have an image you really like, save the untouched original so you can always go back to it.
2. Work your editing magic
Do whatever you do to make your image the way you like it. Then, as a last step:
3. Manually convert to sRGB IEC61966-2.1
I told you there were different sRGBs, right? This is the profile that best fits web use. How do we do this? I will take you through the steps in Photoshop, the most popular image editing program, and then describe ways to do it in other programs. I only have a few editing programs, but this will show you the basic principles:
a. in the Edit menu, go to "Convert to Profile"
b. select sRGB IEC61966-2.1 and the following Conversion Options:
I find "relative colormetric gives the most accurate color conversion. What does this do? It takes what you see in your image, and crams it into a color space using advanced mathematical algorithms to make sure it looks as close as possible to your vision. This is a million times better than sending a photo to the web with a color profile language it doesn't understand.
c. Save your copy.
You did remember to make it a copy, right?
Some consumer programs will make the switch to sRGB when you say "export to web." Others don't handle the switch as well as Photoshop -- GraphicConverter will switch the profile ("Edit Color Profile" under the file menu), for example, but the switch will change your image's look. Whatever program you use, though, you now have the basic language to find the tools you need, through the menu bars or help menu.
Sites that explain color profiles better than I can
Wikipedia: http://en.wikipedia.org/wiki /Color_space - Loads of math and jargon in its pages on specific color profiles
Smugmug, sRGB versus Adobe 98:
Cambridge in Color: srgB versus Adobe '98
Luminous Landscape: Understanding ProPhoto RGB: Even though it deals with a lesser-used profile, this article has many useful graphs on color spaces in general to help visual learners.
TECHtata is a weekly technical column on the general topic of photography and is edited by Ryan Brenizer (carpe icthus). Photos used on utata.org are stored on flickr.com and obtained via the flickr API unless otherwise noted.
Questions, Comments, Discussion
On August 30 2006 Nuno Leitao said ...
Brilliant - very useful article.
On August 31 2006 LaneGreene said ...
Thanks, Ryan. This finally made color space make sense for me.
On September 21 2006 JumpinJack said ...
Good job. Both Ryan and Bruce.
On October 05 2006 JT said ...
brilliant article, exactly what i needed to hear.
On January 04 2007 VitreousHumour said ...
Thanks a lot, that was very useful. After reading it I am a little concerned though, if I use a tool like Qoop through flickr to print images that I have stored on flickr, If I have optimized them for sRGB instead of whatever my camera used originally will the print quality then suffer?
On February 22 2007 Ryan said ...
It shouldn't. Wider-gamut colorspaces are only really going to help you if you have a very carefully managed personal print workflow, and sending photos off to Qoop is anything but -- the workflow is theirs, and they'll tweak it their way.
On April 24 2007 olivier said ...
OMG. I've tried. It's much much better. Well, you're my Heroe of the Day, thanks!
Thank you for visiting Utata! | something to add?
Photo © Dancing star
Relative Color Spaces
The RGB and CMYK color spaces that we commonly use in digital photography are relative color spaces. The RGB and CMYK color space definitions contain recipes for mixing red, green, and blue (or Cyan, Magenta, Yellow, and black) to obtain the other colors in the gamut. These color space recipes provide a reproducible way to mix the primary colors to create all the secondary, tertiary, and higher order colors in the color space.
Back in 1931 the International Commission on Illumination (CIE) held a meeting of all those smart people that Ryan mentioned who studied and debated the absolute meaning of red. They started by studying human vision, reviewing the scientific research, and they defined the first RGB color space in terms of XYZ tristimulus values. 1 One of the key parameters that the CIE panel needed to tie down to define a color space was the white point. 2
In 1931 the CIE defined the following standard color space illuminants were:
Illuminants B and C are no longer considered valid and have been discontinued. In later years, the CIE committee added a hypothetical “ E ” illuminant for mathematical convenience and the modern standard “ D ” – daylight and F – fluorescent illuminants.
Even though the 1931 CIE meeting came up short of their goal of defining the absolute value of red, they created a standardized RGB color space.
Photo © Catherine Jamieson
Absolute Color Spaces
An “absolute color space ” is a color space in where each and every color is unambiguous, and does not depend on any external factors. The CIE 1976 L*a*b* color space is the most common absolute color space. 3 CIE 1976 L*a*b* is considered to be the most complete color model to describe all the colors visible to the human eye.
L* is the lightness parameter (aka brightness, value, or luminance) that has values between L*=0 (Black) to L*=100 (White). Negative a* values are shades of green and the positive a* values are shades of magenta. The negative b* values are blue and positive b* values are yellow. A set of coordinates is in L*a*b* space defines a unique color with a unique lightness.
The L*a*b* color space is a 3-dimentional color space with color distances measured in units of delta E. Sometimes it is convenient to separate L* from the two dimensional a*b* color space. The a* and b* values can be mapped into circular coordinates to form the LCH color space, where the letters LCH represent Lightness, Chroma, and Hue. H defines the Hue (aka color); C defines the chroma (aka saturation or intensity of the color); and L defines the lightness (aka luminance, value, or brightness).
Photo © jon fobes
Anchoring Relative Color Spaces
The sRGB and aRGB color spaces live half-way between the relative RGB world and the absolute CIE 1976 L*a*b* color space. The sRGB and aRGB color spaces are not complete and cannot reproduce every color that the human eye can see. So they have to truncate some colors or make an “educated guess” for others.The sRGB and aRGB color spaces use the D65 illuminant 6500 K to anchor the white point. Anchoring your workflow by using the correct sRGB or aRGB color space, as described in the main article, is usually adequate for most applications.
Now that we have a common recipe book and a well defined white point and anchored it with the D65 illuminant, it seems like we're all done with color spaces. And for most applications, we are done. But unfortunately, Super Macho Man (SMM), and his color blindness, still complicates our life. By defining and writing down the color recipes for SMM, we've improved his severe color blindness to a very mild case. But we are still at the mercy of the subtle variations in printer inks and monitor pixels.
To further anchor the color spaces to account for and correct the slight device dependent biases, the International Color Consortium ( www.color.org ) created a device independent color profile format standard for the registration of tag signatures and descriptions. These tag signatures and descriptions are known as ICC profiles. The ICC profiles are created by carefully comparing the actual output of a monitor or printer with a calibration control standards. ICC profiles record the detailed color space corrections needed for each calibrated output device.
Sidebar information courtesy of Bruce W (starfish 235)
Photo © insunlight
Monitor calibration tool
It happens to all of us at some point. The portrait looks fantastic on the monitor, but it prints with a strange color cast. The reason for this is possible that the color on your monitor needs calibrating.
To calibrate a monitor you have a few choices:
