Menu

RGB color basics

RGB (Red, Green, Blue) is the model we use to represent colors in computers, cell phones, cameras and the web. RGB color is everywhere and understanding its workings and limitations is a must for an exploration of digital color theory.

This brief article explains how digital devices use Red, Green and Blue to represent color, how color in general is identified and how a set of RGB values relates to the color we end up seeing on the display. Some important basic concepts like Hue, Colorfulness, Luminance and White Point are explained in a concise manner, by example.

Color Basics

In color theory, what we call a color is usually identified by two properties: Chromaticity and Luminance.

Chromaticity is comprised of the Hue and Colorfulness of the color. A hue can be understood as a pure color (red, orange, pink...). Colorfulness defines how close the color is to gray. No colorfulness means we have a shade of gray and a high colorfullness gives a "colorful color" such as red, yellow or purple as we normally think of them (pure color). When the chromaticities we humans can see are drawn on a diagram we have what's called a chromaticity diagram:

The axes of the chromaticity diagram are called simply x and y. A pair of xy values describe a Chromaticity completely. Note how a shade of gray appears near the center of the Chromaticity diagram. The Colorfulness increases towards the edges and the Hue changes with the angle. Luminance would be the third axis of the diagram. It can be thought of as making the whole diagram lighter or darker.

The horse shoe shaped border of the diagram corresponds to spectral colors: colors formed by a narrow band of wavelengths of light. The straight border is called the line of purples. These are not spectral colors but are the most saturated purples we can see, formed by combining violet and red. There's a limit on the chromaticities a device can capture or display. The triangle drawn near the center of the diagram encloses the colors that most modern displays can represent. This is explained in detail below.

Red, Green and Blue

Three dimensions are normally used to describe colors accurately. The Red, Green and Blue dimensions of RGB colors are no more than a convenient way that has been standardized for representing colors in digital devices. There are several RGB standards, or ways to represent color that use a Red, a Green and a Blue value.
RGB works by "adding" these three colors together in specific amounts to produce a target color. Red, Green and Blue each take a value in a certain range. They are added as if you had three LEDs (Red, Green and Blue) with a dimmer, each controlled by the corresponding value. It's similar to mixing paint. The difference is that paint does not emmit light, it absorbs it. Mixing Red, Green and Blue paint should give close to black, but mixing R, G and B light gives white light.

How do we define Red, Green and Blue? Remember we are mixing these colors, called primaries. But is there a definition for Red, Green and Blue? We must know exactly what they are in order to get the mix right. In everyday life, we call Red to everything that "looks like Red" and in fact that is perfectly okay. Red comprises a whole section of the visible spectrum and many colors may be called Red. The same is true for Green and Blue of course.

For our devices using RGB, we had to specify exactly what Red, Green and Blue are, in order to have the same look accross devices. This was the reason for creating RGB standards. Under one standard, Red Green and Blue are defined absolutely, in terms of Chromaticity and Luminance. Different RGB standards may use different definitions for the primary colors. This means that a set of RGB values under one standard is not the same color under another.

The most popular RGB standard, called sRGB, uses primaries which correspond to the corners of the triangle drawn on the chromaticity diagram:

The chromaticities formed by addition of primaries are all contained in the triangle. Any chromaticity outside the triangle is not representable by sRGB.

The different RGB standards may also differ in the amount of values R, G and B can take. The most pupular standard called sRGB lets each component take 256 different values. If they were LEDs with a dimmer, a high R value means the RED led should be on, and zero turns it off. The number of representable colors amounts to 256 x 256 x 256 = 16 777 216 colors. Have you heard about 16.7 million color displays?

Studies have shown that humans can distinguish up to 10 million colors, less than modern displays can reproduce. However, even the best devices cannot represent every color we can see. Think about the LEDs with a dimmer analogy. If the Red LED is fully on and Green and Blue LEDs are off, then we have the "purest red". Our "purest red" is just the color of the LED when it's fully on, but it's not necesarily the purest red we can see, which really depends on our anatomy. Our devices are not yet capable of producing the most saturated colors we can see.

White point

What chromaticity should we get if R = G = B? If we are adding the same amount of each color we certainly expect to get a shade of gray, white light that is. We already know about the Red, Green and Blue chromaticities. How much of each one should we add to get gray? Well, it turns out that as there's not a universal definition for Red, Green and Blue, there's not one for Gray either. What is the chromaticity of Gray? What people did, once again, was to agree on what white light is. Fluorescent light is different from sunlight, and from incandescent bulb light. Illuminants were created to standardize each type of white light. Illuminants say how much of each color a type of white light has, which is equivalent to defining the chromaticity of gray.

The chromaticity of gray is called the white point of the color space. One posible white point, called D65 (used by an Illuminant by the same name), is labeled on the chromaticity diagram above. This is the white point used by sRGB, the most common RGB standard. The following is the spectral distribution for the D65 white point, which was created to represent average daylight:

Wait a minute! How can we reproduce that spectral power distribution with just Red, Green and Blue light? Well, we can't. We don't have yellow, orange... What we can do is reproduce the same Chromaticity x, y = (0.3128, 0.3290) by addition of the three primaries. The physical light wavelengths are not the same, but both look the same to the eye.

The white point is important because it gives us the relative weight of the Red, Green and Blue components. In other words, it tells us how much each of them contributes to any resulting Chromaticity, not just gray. What this would mean is that each dimmer behaves linearly, from zero to a maximum light intensity, which is different for Red, Green and Blue.

The three primaries and the white point completely specify an RGB color model. A gamma correction curve (explained below) is added by most standards to cancel out the non-linearity of display hardware, but it's not strictly part of the model.

Luminance

Colors as we perceive them are relative. Imagine you are projecting this website on a screen or a whiteboard. The letters you see projected are black. But isn't the screen/blackboard white? The projector cannot suck in light from the screen to form the letters. It's rather iluminating the rest of the screen in such a way that we see black what "is white". We can always iluminate a bit more and make it a bit "more white". The white point's chromaticity is therefore valid at every Luminance level, and it's not really white but gray.

How much we iluminate, that is, the physical power of the light beam is called Luminance. In most displays Luminance is not fixed. In fact you've probably adjusted the Luminance or Brightness of your display. Formally, Brightness is the perception of Luminance but both terms are commonly used interchangeably. As a result, final Luminance is specified just partially in RGB colors. The higher the R, G and B values, the higher the Luminance. The other part depends on the display and user adjustment.

The white point of a display usually refers to the color (both Chromaticity and Luminance) produced when R, G and B are maximum (eg. 255) for a certain Brightness setting and viewing environment. Using a display's white point and the three primaries, RGB colors can be converted to get the theoretical XYZ values output by a particular display (and Brightness setting), using simple matrices and an additional step called gamma correction.

Gamma Correction

It was explained how an RGB triplet relates to the color output of a digital device. For input devices like cameras the process reverts. The device captures light coming from different directions and translates Chromaticity and Luminance into RGB values. There is an important consideration here. Humans don't perceive light in the same way cameras do. Cameras measure Luminance, light intensity, which is proportional to the number of photons hitting the sensor. However, humans perceive Brightness, not Luminance. When Luminance doubles (twice the number of photons) we don't perceive twice the Brightness.

We are more sensitive to changes in dark tones. When the luminance of a dark tone doubles we perceive more than double the brightness, but if the tone is light, we perceive just a fractional increase. This means we can distinguish more dark than light tones. Because of this, capturing devices apply Gamma Correction or encoding to redistribute tones more efficiently. They remap colors in order to have more possible light tones and less dark ones. It was a coincidence that CRT displays worked exactly the opposite, resulting in a cancellation of Gamma. Some displays apply additional corrections. The idea, of course, is to have a 1:1 relation between captured and output light intensities.

RGB color explained

From Light to RGB color and back to Light

This section sumarizes what has been said so far. The process of capturing an image, converting it to RGB color and then displaying it is summarized as:

An image is captured by a device (eg. camera) which measures the power of Red, Green and Blue incoming light.

The camera device creates an image (JPEG for example) or video that carries RGB values. The capturing device corrects the values to be accurately represented by a typical display.

The values are stored as RGB.

The image is going to be displayed. Device displays don't have a linear relation between R,G and B electric signals and emmited light intensity. However, the values were previously corrected by the capturing device to cancel this effect.

Displays with huge non-linearities like some laptop LCDs, may apply additonal corrections to compensate. Finally, electrical signals produce light outputs which represent the colors captured by reproducing their Chromaticity and Luminance.