The RGB Color Model

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

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.

1

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.

9.jpg

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.

3.jpg

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.

wheel

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.

5.jpg

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.

10

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.

11.jpg

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)

12.jpg

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.”

image28.png

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.

6

7

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.

8

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:

13

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

14.jpg

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

rgb.jpg

and the formula from HSL to RGB in the following image

hsl.jpg

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

paint.jpg

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.

daltonico.jpg

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

1.jpg

References

https://en.wikipedia.org/wiki/RGB_color_model

https://documentation.apple.com/en/finalcutpro/usermanual/index.html#chapter=78%26section=1%26tasks=true

http://graphicdesign.about.com/od/colorbasics/a/rgb.htm

http://bpastudio.csudh.edu/fac/lpress/netapps/hout/rgb.htm

https://www.labnol.org/internet/design/web-colors-in-hexadecimal/5456/

http://www.sketchpad.net/basics4.htm

https://www.khanacademy.org/partner-content/pixar/color/color-101/v/color-2

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

http://www.workwithcolor.com

https://en.wikipedia.org/wiki/HSL_and_HSV

http://www.arcsoft.com/topics/photostudio-darkroom/what-is-color-space.html

Advertisements

Leave a Reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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