The RGB Color Model

In this post, we are going to describe the RGB color model.

What is light?

Light is a form of electromagnetic radiation, a sinusoidal wave formed by coupled electric and magnetic fields. These fields are perpendicular to each other and to the direction of propagation. The wavelength of a sinusoidal wave is the spatial period of the wave. The frequency of the oscillation determines the wavelength.


Electromagnetic radiation can exist at any wavelength. There are radio waves, microwaves, infrared, light, ultraviolet, x-rays, and gamma rays.


A pure source of light (laser) consists of light at a single frequency. Laser light is coherent, that is, the source is tuned so that the wave stays in phase as it propagates. In the natural world, light almost always exists as a mixture of different wavelengths, and it is incoherent.

Example of coherent and incoherent lights:

Electromagnetic radiation can be polarized, that refers to the preferential orientation of the electric and magnetic field vectors relative to the direction of propagation. Unpolarized light consists of many waves that are summed with random orientation. This is typically ignored in computer graphics.

Example of polarized and unpolarized lights:

Example of polarization-unpolarization when light interacts with a surface:

Optics theory and algorithms can be applied to light because it is a form of electromagnetic radiation. The study of optics can be divided into three subareas: geometrical or ray optics, physical or wave optics, and quantum or photon optics.

Quantum optics can explain the behavior of light at the submicroscopic level (for example, photons or particles). This model is too detailed and not commonly used in computer graphics.

Physical or Wave optics is described by Maxwell’s equations and captures effects like diffraction, interference, and polarization that arise when light interacts with objects of size comparable to the wavelength of light. For the purposes of image generation, it is typically ignored.


Diffraction refers to various phenomena that occur when a wave encounters an obstacle or a slit.

Example of diffraction:

Interference is a phenomenon in which two waves superpose to form a resultant wave of greater, lower, or the same amplitude.

Example of interference:

Geometric optics focuses on calculating macroscopic properties of light as it propagates through environments. It also assumes that light is emitted, absorbed, reflected, and transmitted, and that the wavelength of light is much smaller than the scale of the objects that the light interacts with.
The following assumptions can be made in this model:

  • Visible light (or thereabouts)
  • Incoherent light
  • Unpolarized light (random polarization)
  • Macroscopic scale
  • Light travels in straight lines (diffraction is not considered)
  • Light travels instantaneously through a medium (infinite speed).
  • Light is not influenced by external factors (gravity or magnetic fields)

Example of absorption, reflection, and transmission:

How does the human visual system work?

Young–Helmholtz developed a theory called trichromatic color vision (the manner in which the photoreceptor cells in the eyes of humans and other primates work to enable color vision). In 1802, Young postulated the existence of three types of photoreceptors (now known as cone cells) in the eye, each of which was sensitive to a particular range of visible light.

Hermann von Helmholtz developed the theory further in 1850: that the three types of cone photoreceptors could be classified as S-Cones (sensitive to short-wavelength light “blue”), M-Cones (sensitive to middle-wavelength light “green”), and L-Cones (sensitive to long-wavelength light “red”). The relative strengths of the signals detected by the three types of cones are interpreted by the brain as a visible color.


But what do these photoreceptors or cones recept?

They are stimulated by light. Color perception is a result of achromatic and chromatic signals derived from light stimuli. Chromatic signals (~hue) are mostly derived from the light’s wavelength. Achromatic signals (~lightness / grayscale vision) are primarily derived from the light’s energy at a particular wavelength.

Each type of cone is less or more stimulated by a light beam and passes on its stimulus value. The next step is to transform these values into values of three opponent-colors systems. The luma system (~range from black to white, or dark to fully illuminated respectively), the blue/yellow system and the red/green system. Finally, the values of the three opponent-colors systems are put together and make up our color perception.


How many colors can the human visual system perceive?

Research has shown that the human visual system (depending on lighting conditions, etc.) can distinguish between 1 million and 7 million colors. The visible spectrum is the portion of the electromagnetic spectrum that is visible to the human eye. Electromagnetic radiation in this range of wavelengths is called visible light. A typical human eye will respond to wavelengths from about 390 to 700 nm.


How can we represent a color in computer graphics?

We can use the RGB color model. It is an additive color model in which red, green and blue lights are added together in various ways to reproduce a broad array of colors. The name of the model comes from the initials of the three additive primary colors, red, green and blue.

Why is it additive?

The RGB color model is additive in the sense that the three light beams are added together, and their light spectra add, wavelength for wavelength, to make the final color’s spectrum.

Zero intensity for each component gives the darkest color (no light, considered the black) and full intensity of each gives a white. The quality of this white depends on the nature of the primary light sources, but if they are properly balanced, the result is a neutral white matching the system’s white point. When the intensities of all the components are the same, the result is a shade of gray, darker or lighter depending on the intensity. When the intensities are different, the result is a colorized hue, more or less saturated depending on the difference of the strongest and weakest of the intensities of the primary colors employed. By mixing independently controlled levels of these three colors of light, a wide range of brightnesses, tones, and shades may be created.

When one of the components has the strongest intensity, the color is a hue near this primary color (reddish, greenish or bluish), and when two components have the same strongest intensity, then the color is a hue of a secondary color (a shade of cyan, magenta or yellow). A secondary color is formed by the sum of two primary colors of equal intensity: cyan is green + blue, magenta is red + blue, and yellow is red + green. Every secondary color is the complement of one primary color; when a primary and its complementary secondary color are added together, the result is white: cyan complements red, magenta complements green, and yellow complements blue.


What is the application of the RGB model?

One common use of the RGB color model is the display of colors on a CRT, LCD, plasma display, or OLED display such as a television, a computer’s monitor, or a large scale screen. Each pixel on the screen is built by driving three small and very close but still separated RGB light sources. At normal viewing distance, the independent sources are indistinguishable, which tricks the eye to see a given solid color. All the pixels together arranged in the rectangular screen surface conforms the color image.


During digital image processing, each pixel can be represented in the computer memory or interface hardware (for example, a graphics card) as binary values for the red, green, and blue color components. When properly managed, these values are converted into intensities or voltages via gamma correction to correct the inherent nonlinearity of some devices, such that the intended intensities are reproduced on display.


How many colors can be represented with the RGB model?

The ideal RGB color space is semi-infinite in all three axes. There is an absolute zero value for each component, bounding the negative directions, but the positive directions are (theoretically) unbounded. However, the reality of physical display devices imposes severe limitations on the final output color space. When limited to the colors that can be represented by a particular display device, the RGB color space is not infinite in any direction. RGB is a device-dependent color model: different devices detect or reproduce a given RGB value differently, since the color elements (such as phosphors or dyes) and their response to the individual R, G and B levels vary from manufacturer to manufacturer, or even in the same device over time.

Displays have minimum and maximum brightnesses in each of their three color axes, defining the range of colors that they can show. This range is generally known as a display device’s gamut.


The minimum of all color components combine to the device’s darkest color, which represents black, and the maximum of all color components combine to the device’s brightest color, which represents white. While it might be possible to create extrema that are not pure black and pure white, these are unlikely to be useful in a general display device. Every display device is likely to have different exact values for its extrema, so it is convenient to use a standard color space for all devices as sort of normalized device colors.

What is a color space?  What is the difference with color gamut?

The RGB color model has its own gamut (range) of colors that can be displayed. It is limited to only a portion of the visible spectrum. Since a color model has a particular range of available color or gamut, it is referred to as using a “color space.” RGB color space defines a color cube where black color is at origin (0.0, 0.0, 0.0) and white color is at (1.0, 1.0, 1,0)


Is there another representation of RGB color space?

HSL is a cylindrical-coordinate representation of points in an RGB color model. Its purpose is to be more intuitive and perceptually relevant than the cube representation. HLS stands for hue, saturation, and luminosity. The angle around the central vertical axis corresponds to “hue,” the distance from the axis corresponds to “saturation,” and the distance along the axis corresponds to “luminosity.”


How can we represent a color in RGB color model?

In the RGB color model, colors are represented by varying intensities of red, green and blue light. It can be represented by 3 vectors.

If we use floating-point format

(1.0, 0.0, 0.0) → red

  (0.0, 1.0, 0.0) → green

(0.0, 0.0, 1.0) → blue

If we use integer format

(255, 0, 0) → red

  (0, 255, 0) → green

(0, 0, 255) → blue

The intensity of each of the red, green and blue components are represented on a scale from 0 to 255 (or 1.0 in floating-point format) with 0 being the least intensity (no light emitted) to 255 (or 1.0 in floating-point format) (maximum intensity).

For our explanations, we will use the floating-point format from now.

What operations can be done with RGB color representation?

As we mentioned in this gamma correction article and as galop1n mentioned in this GameDev post, we need to work in linear space, not in gamma space, because we are going to get undesired and incorrect results (please read gamma correction article to understand exactly why).

Adding RGB colors is done using vector addition; the colors are added componentwise.
Adding two colors has the same effect as combining the light from two colored light sources. The operation of adding colors can be used in lighting computations to represent the addition of light from multiple light sources and to add the various forms of light that each source can apply to a surface.



Scalar multiplication of RGB colors is computed in the same way as with vectors, multiplying the scalar times each component, and is ubiquitous in lighting and other color computations. To increase/decrease the luminance of a color, you can perform scalar multiplication by a positive/negative scalar. Scalar multiplication is most frequently used to represent light attenuation due to various physical and geometric lighting properties. Luminance is a measure to describe the perceived brightness of a color. Black has the lowest and white has the highest luminance value.


What happens if a color exceeds 1.0 value? 

Intermediate color computation (for example, lighting) can produce colors outside RGB color space unit cube. Not all devices can display colors outside this range, so before assigning final colors to the screen, all colors must be within the normalized cube. This requires either the hardware, the device driver software, or the application to somehow remap or limit the values of colors so that they fall within the unit cube.

The simplest and easiest method is to clamp the color on a per-component basis:


However, it should be noted that such an operation can cause significant perceptual changes to the color. For example, the color (1.0, 1.0, 10.0) is predominantly blue, but its clamped version is pure white (1.0, 1.0, 1.0).

A more advanced method is known as tone mapping. We will not describe it here, but you can see an example in the following image


Is there a way to convert from RGB to HSL and vice-versa?

Yes, you can see the formula from RGB to HSL in the following image


and the formula from HSL to RGB in the following image


and the following image shows a Paint’s screenshot of the same color in HSL and RGB.


Where is an RGB color stored?

Standard RGBA color formats include:

  • Single-precision floating-point components (128 bits for RGBA color).
  • Half-precision floating-point components (64 bits for RGBA color).
  • 16-bit unsigned integer components (64 bits for RGBA color).
  • 8-bit unsigned integer components (32 bits for RGBA color).

Floating point formats are the most popular to store intermediate results in rendering pipeline (for example, intermediate lighting calculations). Integer formats are the most popular to store rendering pipeline output, typically it uses unsigned 8-bit values per component, leading to 3 bytes per RGB color, a system known as 24-bit color.With an alpha value, the format becomes 32 bits per pixel, which aligns well on modern 32- and 64-bit CPU architectures.

Research has shown that the human visual system (depending on lighting conditions,
etc.) can perceive between 1 million and 7 million colors, which leads to the (erroneous) theory that 24-bit color display systems, with their 224 ≈ 16.7 million colors, are more than sufficient. While it is true that the number of different colors “names” in a 24-bit system (where a color is named by its 24-bit RGB triple) is a greater number than the human visual system can discern, this does not take into account the fact that the colors being generated on current display devices do not map directly to the 1 million to 7 million colors that can be discerned by the human visual system. Also, in some color ranges, different 24-bit color names appear the same to the human visual system (the colors are closer to one another than the human eye’s just noticeable difference). In other words, 24-bit color wastes precision in some ranges, while lacking sufficient precision in others.

Do all human beings perceive colors in the same way?

The physiological prerequisites for color vision allow drawing the conclusion that there is no uniformity in color perception among individuals. Several physiological deviations can cause a shift in color perception.
For individuals with “normal” vision, these shifts can be hardly measured. Less fortunate people suffer from significant changes in color perception, called color vision deficiency or “color blindness.” Most of the times this is caused by cones which are defective, absent or altered in their spectral sensitivity.


Some people possess 4 types of cone cells instead of 3. This is called tetrachromacy.



Geometry and Programmable Shading – Essential Mathematics for Games and Interactive Applications 3rd Edition


3 thoughts on “The RGB Color Model

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s