Color Space and Interpolation
Last updated 23 March 2015
The color space used for combining colors or interpolating between color values greatly effects the resulting colors. Most software today uses the sRGB color space. Blending/interpolating in this color space usually leads to unexpected results. A linear color space is much preferred. But support for linear color spaces is pretty rare. Both Gimp and Photoshop support linear color spaces when the color depth is 16 or 32 bits. The SVG standard includes two attributes for requesting that color operations be performed in a linear colors space: 'color-interpolation' and 'color-interpolation-filters'. Unfortunately, nobody implements the former property (there is a lack of support in graphics libraries). The new Compositing and Blending Level 1 specification doesn't even mention color spaces. The linear option for the 'color-interpolation-filters' property is implemented by all browsers since that is the default (and it is relatively easy to implement).
Color spaces are important for color operations in a number of areas:
Blending in the sRGB color space produces unexpected dark borders between regions being blended.
On the web, the only real way to get linear blending is to use SVG filters. This is not particularly easy and browser support is flaky (as the above example demonstrates).
The video Computer Color is Broken has caused a heighten interest in this topic.
Interpolation between color stops in gradients should be done in a linear color space. At the moment, no browser does this.
A real life example:
Up/down scaling should be done in linearRGB. If it is not, it can lead to unexpected color shifts. Here is a simple test that illustrates the problem:
A good discussion of this problem can be found at the Gamma error in picture scaling web site.
SVG filters can also depend on the color space used. The default color space for SVG filters is linear. Most, if not all, browsers implement the 'linearRGB' value for 'color-interpolation-filters' as this is the default value.
Browsers mostly implement this consistently (after some recent work). Here is a test for a variety of filter primitives that depend on the color space used.
Doing the Right Thing
Historically, the sRGB space was used for performance reasons. With more power computers and off-loading to GPU's, we should at least be able to specify that the browsers do the right thing. One interesting note is that OpenGL can convert sRGB to a linear color space for color operations with no performance loss using EXT_texture_sRGB.