|RGB Color Space Conversion|
|Sunday, 16 May 2010 00:00|
I've been on a bit of a color science kick lately and transferring from one color space to another becomes a common operation when you want to properly play with digital color values. Normally we just think of digital colors as RGB values, but there are many ways to numerically describe a color. Just opening PhotoShop's color picker lets you choose colors as HSV, Lab, or CMYK values in addition to the standard RGB. If you're a bit more adept with PhotoShop, you've may have even ventured into the Color Settings which has even more options including which version of RGB that your image will use. It is this concept of multiple RGB spaces that I'm going to focus on.
Depending on how you ended up here, it might even be a surprise that there are multiple types of RGB, so I'll do my best to present some background on that and introduce a color space called XYZ. Then we can walk through the math for converting between all these RGB variants and discuss why you would even consider doing so. Finally, I'll present some example code for implementing the color space conversion.
Multiple RGB Spaces
When you tell a pixel to draw using RGB components, you are specifying intensity values for red, green, and blue primary lights which output to the pixel. When your monitor mixes these lights, you get the desired color. The problem is that there are many types of displays out there and the primary lights might not all be the same. Granted the lights will be similar, but the red primary on one monitor may not exactly match the red primary on another monitor. For example, the primaries of your old CRT television do not match your new high-definition LCD television. When the primary lights don't match, a color with the same RGB components will also not match because it is adding together different primary colors.
The range of colors producible by the primary lights of an RGB space is called its gamut, and it's important to note that when two spaces have different gamuts, there will be colors that one space can produce and the other cannot.
For lots of applications this whole concept isn't really anything to worry about. As long as your reds look reddish and your greens look greenish, all is well. When color accuracy is important or if you want to become some sort of color-nazi, you'll want to convert from one color space to another. One use might be to convert a texture that was painted on an LCD monitor to matching (or as close to matching as possible) color values for display on a CRT television.
XYZ Color Space and Chromaticity
So far we have been describing colors as a combination of the red, green, and blue primary lights of an RGB color space. In order to compare one color space to another, it would be useful to have a standardized general space that any visible color can be defined within. Fortunately, there is an authority on these things to help us out. The Commission internationale de l'éclairage (French for International Commission on Illumination and often abbreviated as CIE) is located in Austria.
In order to define different RGB color spaces in a common manner, we will use the CIE 1931 XYZ color space. The XYZ space was designed around being able to describe all colors visible to humans. I mention "human vision" specifically because different species can actually view different parts of the light spectrum. For example, some birds can actually see UV light, but don't get too jealous because they also get more harmful radiation in their eyes as a result. There are a few facts about XYZ space that I want to point out before we progress.
Three-dimensional color diagrams can be a bit confusing so fortunately our friends over at the CIE have given us yet another tool to describe color, the two dimensional xy chromaticity space. Chromaticity is the description of a color ignoring its luminance. Because a color can be uniquely defined as a combination of luminance, hue and colorfulness, we can also say that chromaticity is a combination of hue and colorfulness. For example, saying that a color is a saturated red would describe a chromaticity, while bright saturated red would describe luminance along with chromaticity.
So how do we mathematically specify chromaticity? We can use the CIE 1931 xyY color space. Beware from here on out because I'll be using lowercase x, y, and z to mean one set of values and uppercase X, Y, and Z to mean another set of values. Don't blame me for this - it was all decided over in Austria.
We are going to define three values x, y, and z in terms of X, Y, and Z as follows (finally some math!).
Based on these equations we can infer
Knowing that x, y and z sum to 1, lets us define one of these components in terms of the other two. Let's do so for the z component.
Because we can derive z from x and y, we only really need to specify x and y to describe a unique xyz value. If we are given an xy value of (0.2, 0.3), we know the z value to be 0.5. While this may all seem a bit arbitrary, what it has done is created a two-dimensional xy space that we can easily graph on a two-dimensional surface.
You may have noticed that I listed this space as CIE 1931 xyY color space and not xy or xyz color space. The reasoning here is that we need either X, Y or Z to recreate our original color. With xyz values, we have lost some information. The fact that they can be uniquely represented in two-dimensions should be a tip-off that something shady was going down. While any of the original XYZ components can be used along with xy to recompute the original color, we use the Y component because it represents the luminosity and we might as well have that number lying around instead of X or Z which don't mean anything too comprehendible on their own.
Now that we can describe color (excluding luminance) in a two-dimensional space, it's the perfect time for a picture.
I mentioned earlier that only part of XYZ space corresponds to human-visible color. The area shown in this diagram is the xy representation of that visible range. You monitor isn't capable of displaying all visible chromaticities (unless maybe you are reading this long after I wrote it in which case, awesome!). This is why I haven't bothered to put much color in this image. The subtle color you do see is sort of a compression of all visible chromaticities into RGB space but even that is a bit of a hack and I wouldn't view the displayed chromaticities as anything scientific.
Without getting too off track, if you are familiar with linear algebra or 3D math, you might be wondering what we are actually looking at here spatially (it did all start from some 3D XYZ space after all). When creating the xyz values we essentially made a perspective projection of XYZ space onto the XYZ plane containing the points (1,0,0), (0,1,0), (0,0,1). In doing so, the positive octant of XYZ space all ends up in the triangle created by those three points. Our xy chromaticity diagram is an orthographic view of this three-dimensional triangle along the Z-axis.
Defining an RGB Color Space
Now that we are familiar with XYZ space and xy chromaticity coordinates, we can start using them to define RGB color spaces. This definition consists of xy chromaticity values for the red primary, green primary, blue primary, and white point along with a gamma correction curve. I'll be using the sRGB color space in my examples below. sRGB is the standard color space for the internet and thus your browser should do a pretty good job of displaying it. This actually brings up an interesting example of where color space conversion could be of use. If it is assumed that the internet is all encoded with sRGB color, and you were making some new cell phone that has different display primaries, you would optimally map from sRGB space to the phone's RGB space when browsing the web.
Red, Green and Blue Primaries
Chromaticity coordinates are given for each primary of the display. For sRGB space, they are as follows:
If you recall from earlier, the gamut of a color space is the subset of color that can be represented by that space. We can now graph the sRGB gamut on our chromaticity diagram. Comparing the listed chromaticity coordinates with the diagram, you'll find they match the corners of the triangular sRGB color gamut.
Being the standard color space of the internet (and probably pretty close to your monitor's color space), only chromaticities within that triangle can be created on the web. I have also specifically rendered this image to accurately represent those chromaticities assuming your monitor is properly calibrated (which it probably isn't - mine certainly isn't).
The first time I ever saw one of these diagrams I was a bit concerned, because it looks like our monitors don't come close to handling the color green. Just look at all that visible color to the upper left of the triangle that cannot be displayed! Fortunately, it turns out that things aren't as bad as they look. Both xy and XYZ space are a bit stretched and skewed with respect to how we perceive color. You'll notice a bunch of little dots curving around the diagram in the shape of a tongue. Those dots represent the visible light spectrum in terms of wavelength separated at intervals of 5 nanometers. The details of it are a bit off topic from our goals, but knowing that they have some linear spacing helps us see the distortion in the diagram. The dots travel from red light, through green light, and end at blue light. As you can see, the spacing gets stretched near the greens and very compressed near the blues and reds. Essentially, the error in green color isn't as bad as the diagram makes it seem.
This might seem a bit odd at first, but the white point is used to specify the color of white. One might expect that the color of white would actually be white, but that is only half true. I say that it's "half true" because perceptually a color may look white, while physically it actually has some color tint. The human vision system is a complex beast and will more or less choose what color should be perceived as white according to what is in view. This color which should be considered as white is known as the white point.
For example, normal incandescent light bulbs give off a red-orange light, while mid-day sun light is closer to a more neutral white. Regardless of this color shift, you perceive a white piece of paper as being white when you look at it under a light bulb or outside on a sunny day. Granted, you may be conscious of the hue shift to some extent, but the point is that you do not get confused thinking that all of your paper turned reddish when you are under a light bulb. Understanding this perceptual effect is actually important in photography. Color correction is often applied to photographs such that the white points which images were captured at are converted to the white points at which images will be viewed at.
For sRGB, the white point has chromaticity coordinates (0.3127, 0.3290). This white point is also known as D65 which is an estimation of the white color produced by mid-day sunlight. Let's map it on the chromaticity diagram.
Gamma Correction Curve
The gamma correction curve is used to convert pixel luminance from a linear scale to an exponential scale. When encoding the final pixel value, the curve is used to gamma compress linear luminance to a gamma corrected value. When decoding a pixel value, the inverse curve is used to gamma expand the value back to linear units.
We don't perceive the luminance of a color on a linear scale, so this gamma compression actually helps us store more useful information in a limited number of bits per pixel. This nonlinear relationship between linear luminance and the perceived brightness of a color (also known as lightness) is shown below.
If we were to store image values on a linear scale, single steps in value would correspond to large steps in lightness on the lower end of the scale and minor steps in lightness at the higher end of the scale. As a result, we would lose a lot of lightness fidelity in dark colors.
Now let's look at luminance using the sRGB gamma corrected curve.
We now get consistent steps of lightness across all values letting us encode lightness with more fidelity across the entire scale. While this image does show linear lightness (human perception), it should be stressed that we are no longer working with linear luminance (physics).
This concept is the source of a lot of lighting errors in older 3D video games (actually a number of new ones still have the problem too). Because of hardware limitations and performance issues, some video games just perform their lighting in the non-linear RGB space that their textures were encoded in. This results in the addition of lights creating brighter results than intended. This is pretty easy to see in the above images. If you locate the pixel with a grey color of (128,128,128) in each scale, you will see that it is around 22% into the linear luminance image and exactly 50% in the gamma corrected image. Now let's say you were adding two lights together at this luminance. In the linear scale you would double your 22% putting you 44% into the linear image which has the correct value of (178,178,178). In the gamma corrected scale you would double your 50% putting you at 100% into the gamma corrected image which has an over-bright value of (255,255,255).
In addition to the benefits of encoding lightness, gamma curves are also chosen to match physical output properties of a display device. For example, the electron guns of a CRT monitor have a non-linear output and must be supplied with gamma corrected input such that the appropriate real-world luminance is created.
A simple gamma correction curve is often defined as where the gamma value, , is some number greater than 1.0. In the case of sRGB, the gamma curve is a bit more involved. It is built by piecing together two separate curves. Lower input values use a linear curve while higher while higher input values use an exponential curve.
The equations to convert linear sRGB values to gamma corrected sRGB values are
and the equations to convert gamma corrected sRGB values back to linear sRGB values are
Linear Transformation of Color
We now know how an RGB color space is defined and how to use the gamma curve for converting between linear and gamma corrected values. That leaves us with the final step of converting from a linear RGB color to an XYZ color. Once we are in XYZ space we can convert back to any RGB space of our choosing, but that's really just the beginning. Because XYZ space is a standard color space from which others are defined, we could choose to convert to a number of non-RGB color spaces such as the more perceptually uniform Lab color space or the biologically driven LMS color space.
A fundamental part of the conversion between linear RGB space and XYZ space is recognizing that they are both vector spaces. This basically means that numbers scale in a linear fashion. In contrast, the gamma corrected sRGB space scales luminance in a non-linear manner and is thus not a vector space with respect to luminance. If you've got some sort of math fetish and want to go into more depth on the subject, look up Grassmann's law which talks about color perception as linear combinations.
Knowing that we are working within a vector space puts a whole assortment of linear algebra tools at our disposal. One such tool from linear algebra we will make use of is defining the basis of one color space in terms of another. This is similar to defining the transformation of an object in a 3d space.
As we discussed earlier, an RGB color space is built by adding together three primary colors. The first primary is near the red portion of the spectrum. The second is near green. The third is near blue. To get the color yellow, we add the red and green primary colors together. This operation can be viewed as 3-dimensional vector addition. Let vectors , and equal our primary colors red, green, and blue respectively such that
We can now define yellow as vector plus vector .
The color orange is a combination of the red primary and half of the green primary. This requires us to scale the green primary when we add it to red. The resulting math for orange is
Essentially, any color in a linear RGB space can be built as a linear combination of the , , and (i.e. red, green, and blue) basis vectors for that space. In more general terms, we can define any color using a red scalar , green scalar , and blue scalar using the following equation.
This might seem like we are over complicating the situation, but it will pay off. First, let's just run through some examples defining colors in this manner.
In the examples above, the RGB primaries, i, j and k, were defined with respect to their own RGB color space which made the values fairly trivial. Things become more interesting when we start working with respect to a different color space such as XYZ.
The goal is to find the three XYZ colors that match the primaries of a linear RGB space. Once we have , , and in XYZ space, we can use the same , and scalars to find the XYZ value of an RGB color. I'll be going over how we can derive these new primaries momentarily, but first let's assume we already know their values so we can clarify the process with an example. Let be the red primary in XYZ space, be the green primary in XYZ space and be the blue brimary in XYZ space.
We can now calculate any linear RGB color in XYZ space as a linear combination of the primaries in XYZ space.
Recalling that orange was defined by the scalars r=1, g=0.5 and b=0, we can calculate the linear RGB color orange in XYZ space like so:
We can take this whole process one step further by recognizing that we are really multiplying a vector by a transformation matrix to convert it from linear RGB space to XYZ space. In the previous example we were using the XYZ vectors , and to build the transformation matrix. Let's specify the three vectors in terms of their components.
By combing these three column vectors into a column major transformation matrix, we can rewrite our color transformation equation as follows.
Deriving the Transformation Matrices
As shown earlier, the transformation matrix from linear RGB space to XYZ space has columns built from the primary RGB colors in XYZ space. In order to find these values, we need to use the RGB space's xy chromaticity coordinates for red, green, blue, and white. Notice that we only have the x and y coordinates. As discussed earlier, we can compute the z coordinate from x and y but we need either X, Y or Z in order to convert back to XYZ coordinates. As it stands, we don't have enough information to go from xy chromaticity space to XYZ space, but do to the intentions of our transformation, we can make one more assumption.
Let's clarify the purpose of this transformation. I previously mentioned how the eye adapts to the lighting environment to choose what color should be perceived as white. For our purposes we want to consider the perceived white as being maximum luminance. This means that if we transformed from RGB space A into XYZ space and then into RGB space B, we would want the white from RGB space A to maintain luminance in RGB space B. All we need to do is make sure that when an RGB space transforms into XYZ space the white values always ends up with a consistent Y (i.e. a consistent relative luminosity).
I mentioned that choosing any Y luminosity for the white points will do as long as we are consistent, but it is standard practice to use a Y value of 1 for full luminance. Sometimes you may see a Y of 100 used as full luminance, but in this instance a value of 1 is the norm. With a target Y value for white, we now have enough constraints to solve for our matrix. Let's list the variables we start with.
The goal is to solve for a column-major transformation matrix, , that will convert from linear RGB space to XYZ space. The first step is to convert all xy chromaticity coordinates to xyz chromaticity coordinates by using the previously discussed equation .
The next step is to define an equation for converting from xyz space to XYZ space. Using the XYZ to xyz equations , and , let's define an XYZ vector in terms of its chromaticity coordinates
Now we can solve for by using our known value of and the above conversion from xyz space to XYZ space.
Now we can work towards solving for . To do this we first need to recall that the columns of are the red, green, and blue primaries in XYZ space. Let's define using our xyz to XYZ conversion,
Expanding our column vector notation we get:
Noticing that each column of is a scalar multiple of the respective xyz primary color, we can factor a scale matrix out of like so:
We know all of xyz primary values and thus know the left matrix in the above equation. Our unknowns are now down to the three scalar values that make up the right matrix. Note that while each of those scalars is written as a sum of X, Y and Z components, we only really care about the summed result and not the individual parts. That is why I say there are only three unknowns instead of nine. In order to solve for the three unknowns, we will use our known RGB and XYZ values of the white point. Because transforms from RGB to XYZ space, we can declare the following equality:
Let's substitute in our know the value of .
Now we can multiply our substituted vector by the scale matrix.
We will now left multiply each side of the equation by the inverse of our remaining 3x3 matrix. This will put all of our known values on the left side of the equation and our unknown values on the right. If you are unfamiliar with calculating the inverse of a 3x3 matrix, I will provide code at the end of the article, but for the sake of sanity won't be writing a full derivation here. Google should bring up a ton of results about the process including this one from Wikipedia and this one from Mathwords.
We can now rebuild our RGB to XYZ transformation matrix . Multiplying our vector by the inverse of the above 3x3 matrix will give us the scalar values which convert the primary xyz coordinates to XYZ coordinates. These are the three unknowns of the scalar matrix that we factored out of .
In order to get the matrix transforming in the opposite direction (from XYZ space to linear RGB space), we can use the inverse of . We could also derive the matrix in a similar fashion to above, but just using the inverse seems like a simpler approach after this much typing.
Linear Transformation Example for sRGB Space
To help understand the matrix derivation, let's run through the numbers for the sRGB color space. First off, recall the xy chromaticity coordinates of red, green, blue and white that we plotted on the chromaticity diagram.
Next convert the xy coordinates to xyz coordinates.
Next convert our white point xyz coordinate to an XYZ coordinate by using a Y luminance value of 1.
Solve for the (X+Y+Z) scalar values that will convert each xyz primary to XYZ space.
Reconstruct the matrix which transforms from linear sRGB space to XYZ space.
If you want the reverse transformation from XYZ to linear sRGB space, use the inverse of .
Checking the sRGB specification on color.org, you will find the same values for and (rounded to 4 decimal places) listed in equations 1.8 and 1.1 respectively. That makes me feel comfortable that the math was all done correctly and implies we can use this method to generate conversion matrices to and from any linear RGB space.
Writing the Code
For the code example, I'm going to show both the algorithm for generating linear transformation matrices and an example of doing a full transformation between sRGB space and XYZ space. In order to implement other RGB spaces, you only need to implement the appropriate gamma correction curve (which should be simpler than the sRGB one) and supply the chromaticity values for the primaries and white point.
These code samples are released under the following license.
First we need a few simple math types.
Next we need a few math helper functions.
These are the gamma correction functions for sRGB color space. These make use of the common run-time library function, powf, from <math.h>.
This function builds the transformation matrix from a linear RGB space to XYZ space,
Finally, this function just shows an example of converting back and forth between sRGB space and XYZ space.
|Last Updated ( Thursday, 24 October 2013 04:21 )|