http://www.monet2010.com/

Working with digital media can be a challenge sometimes. Especially if you are working with color spaces, they can be a tricky concept to grasp in the beginning.

Most designers and developers have at some point noticed color inconsistency in their images, going from design to production.

This is where color spaces come in.

Color space definition:

“A ‘color space’ is a mathematical method to describe all visible colors. Any visible color can be described as a point in this color space.” [Wikipedia]

Similarities and differences

Both color spaces (Adobe RGB and sRGB) are based on the same structure. Meaning they both have a channel for Red (R), Green (G) and Blue (B), and it is the combination of these three colors that make all the colors you see on your screen.

The thing that differentiates the two from each other is that Adobe RGB has a wider gamut than sRGB. It means it covers a larger area (see image to the right). But what seems to be a common misunderstanding, is that Adobe RGB has more colors. Fact is that both color spaces have the excact same amount of colors. But because Adobe RGB is spread over a larger area, and has the same amount of colors, it has to compensate by having more space between the colors.

Have you ever converted an sRGB image to Adobe RGB, and the colors look darker and more dull? This is a typical example of the sRGB color space’s interpretation of Adobe RGB. And the reason for this is that as I mentioned before the gamut is wider in Adobe RGB, which means the numbers for each color are spread beyond the sRGB color space.
The same thing happens when you convert the other way, only the colors will look brighter.
So if you for example, have your brightest green in sRGB it will not be the same in Adobe RGB (most likely it will look darker, more dull), because that exact same color may exist further out in the Adobe RGB’s gamut, outside of sRGB’s gamut.

“Washed out” effect example

For the purpose of this example I have used a black and white gradient to visualize the gamut of each color space (to better visualize the “washed out” effect). As you can see, the whitest shade in the sRGB gamut is grey in Adobe RGB gamut. This is what happens when you convert between the two. Adobe RGB to sRGB makes the colors brighter, and sRGB to Adobe RGB makes the colors darker (more dull).

So which color space should I use?

Whether you choose Adobe RGB or sRGB is up to you but it is crucial to know when to choose what.

I recommend that when working with web, you make everything in sRGB color space, to prevent any color distortion when saving your image. Because most browsers are not aware of color spaces, they display everything as sRGB.

Adobe RGB should only be used in color-managed applications (like Photoshop). Not in a browser.

I personally only use Adobe RGB for one thing, and that is for taking pictures with my camera. It is great for that, because Adobe RGB is able to show many more colors and shades than sRGB is.

Additional information

This subject is broad and comprehensive, and I haven’t covered nearly every aspect with this article. I’ve merely targeted the essentials for use on web and Photoshop.