Color Space Charts

A) RGB Triangle Charts

B) HSV Hexagon Charts

C) HSL Hexagon Charts

D) Interactive Cube Slices

Explanations to Color Space Diagrams

Preface

Purpose of this article is to provide some explanation for the color charts shown on this page. For a better understanding I will first give very short introductions to the physics of color and the physiology of color recognition. The second part provides a compact information for color spaces and color mixing. Please see the attached links, if you wish to get more information. 

The idea to show color charts on my homepage emerged in December 2004. I wanted originally to write a program, which calculates color mixtures and displays them in a triangular chart, which is often used in physics and chemistry to display properties of 3-component mixtures.  

The calculations were easily done with Microsoft Excel ®, but I didn't had the knowledge and time to write a program in PHP. I created the charts therefore in January 2005 by manual transfer of the calculation results from Excel ® to HTML. Encouraged by the nicely looking results, I added in February and March also the displays in hexagon form. This part is not very scientific, because I collected the basics for color spaces after I had already created the charts. I apologize for any incorrectness, but I will certainly not find time within the next 20 years to improve them. Anyhow, I hope that some readers find the chats interesting or even useful.

Wolfgang Schaefer; Seoul, Korea, in March 2005

1     Introduction

1.1    Light 

Light is electromagnetic radiation in the wavelength range between 390 and 750 nm. A better description is that electromagnetic radiation in the said wavelength range can be detected by the human eye and gives the impression of light (link: Wikipedia - english)

1.2    Color 

White light can be separated in colored components by using a prism. This phenomenon is called “diffraction” (note 1). Light rays passing the edge of a prism are deviated into a new direction. The reason for diffraction is the dependency of the deviation from the wavelength of the electromagnetic radiation. The same effect can also happen at fine water droplets and is the physical explanation for a rainbow.

A white light ray passing a prism or water droplet is fractioned into its components separated by wavelength of the light. The visible colors of the components are corresponding to its wavelengths. Colors can be described as the visible impression of light at different wavelengths (or wavelength distribution). Blue light has a short wavelength (400 nm), red light a long wavelength (700 nm). Electromagnetic radiation with wavelength shorter than 390 nm or longer than 750 nm is not visible by the human eye and referred to as “ultraviolet light” (10-390 nm) and “infrared light” (750-1'000'000 nm).

1.3.   Spectral colors and combination colors

The colors included in the diffraction of white light are in order of shorter wavelength: Red, Orange, Yellow, Green, Blue and Blue-violet with all hues in between. Those colors are named “spectral colors”, because they are included in the spectrum (note 2) of white light. Light of a single wavelength can not be split furthermore using a prism and is called a pure spectral color.

Not all colors can be obtained by light of a unique wavelength. Some colors, for example brown, require the mixing of two or more spectral colors with different wavelengths. Those colors are called “combination colors”. 

Also each spectral color can be obtained by mixing of other colors. Mixing of green and red light gives as example yellow color. Yellow can therefore be either a pure spectral color or a combined color. The difference is undetectable by the human eye, but both cases can be easily distinguished when using a prism. 

It is well known, that mixing of three selected colors is sufficient to create all other possible colors. This principle is used for color TV or colored prints. The reason for this behavior of color is explained in the next chapter. We will come back to color mixing in more detail in a later chapter.

2.    Physiology of Color 

The human eye contains receptors which are sensitive towards light. Within the receptors light is used to trigger biochemical processes which are finally converted to electric signals, which are routed through the nerves to the brain, where the signals are converted to colors and pictures.  

The eye contains two kinds of receptors, rod cells and cone cells. The rod cells have high sensitivity, but they are not selective towards the wavelength of light, they can not distinguish colors. The rod cells are used to create black- and white images (including gray shades) of high resolution even at poor illumination.

The second kind of sensors are cone cells, which react selective on light of specific wavelength ranges. They allow hereby to distinguish colors. The human eye contains three different kinds cone cells, which react either on red, green or blue (note 3). Cone cells have a lower sensitivity than rod cells, which explains, that colors are only visible at sufficient illumination, whereas the in the dusk only as gray shades are seen. The ability to distinguish colors is only found with animals, who need this feature for their  search for food, examples are apes (to find mature fruits) or bees (to find flowers).

Because all colors are created in the brain by the combination of three nerve signals (from the cone cells for red, green and blue), it is also be possible, to create all possible colors by mixing of three selected specific colors. The principles for color mixing have therefore no physical reason, but are the consequence of the human physiology with color perception through three different color specific sensors.

3.    Color spaces

3.1.   General

Because all possible colors can be obtained by the combination of 3 selected single colors (eg. red, green and blue), 3 independent parameters should be sufficient to describe or define any color. An example would be the set of the parameters brightness, share of red and share of green, the share of blue is then already given. Such systems, which can be characterized by 3 parameters, are called 3-dimensional or "space", in our particular case "color space".

3.2.   RGB color space

The easiest description of color is the set of the coordinates quantity of red light, quantity of green light and quantity of blue light. This color space is cubical with the corners black (0,0,0), red (1,0,0), green (0,1,0), blue (0,0,1), yellow (1,1,0), magenta (1,0,1), cyan (0,1,1) and white (1,1,1). All other colors are then on the surface or within the cube. The RGB color space is helpful to describe the colors of active devices such as TV screens or computer monitors. The color "turquoise" is for example in program codes like HTML referred to as #22d3bd, whereas 22, d3 and bd are the shares (in hexadecimal code) of red, green and blue necessary to create turquoise on the screen.

The interactive diagram Cut the Color Cube allows you to display slices of the RGB Cube. I have added this section in 2007 after having acquired some basic knowledge of JavaScript. It contains also the possibility to display cuts through the HSL or HSV space, however not in their usual forms as pyramid, cone or cylinder, but forcibly transformed in cube shape.

3.3.   CMY color space

This color space has also the form of a cube, but now with the complementary colors of the RGB cube as base colors, such are cyan (a greenish blue), magenta (a reddish violet) and yellow. A mixture of light of any color with its complementary color gives white light. The CMY space is useful for color printing, because its base colors are used as process colors in the 3-color printing process. 

3.4.   HSV color space

In this systems, a color is described by its hue angle, saturation and value.

The concept of hue angle is based on the finding, that both ends of the visible spectrum (blue-violet at 390 nm and deep red at 750 nm) are for the human eye similar enough, that the spectrum can be arranged in a circle with help of the additional mixed color red-violet (magenta). This so called color circle contains most colors except black, white, gray and some dull colors such as brown. The position of a color in the circle can be noted as an angle, the color angle h. Red has conventional the angle 0, green is at 120° and blue at 240°.

The saturation S is the pureness of the color between 0 (gray shades) and 100% (brilliant colors such as pure red). A saturation in between appears as a mixture of the pure color with white. Pink has as example the same color angle as red, but a lower saturation (mixture of red with white). 

The last parameter describes the brightness of the color. The brightness of a color on a TV screen or any other RGB device (e.g. computer monitor) is given by the average of the three color signals for R, G and B:

    V' = (R+G+B)/3

The brightness is often replaced by the "value" V, which is the maximum value of the three color signals:

    V = Max(R,G,B)

The hexacone model (note 4) of the HSV space is an upside down six-corner-pyramid with black in the peak (V=0), white in the center of the base (V=100%, S=0), all gray shades on the central axis  (S=0) and the saturated colors on the surface (S=100%). The colors of the color circle are located on the edge of the base (V=100%, S=100%) with the base colors red, green and blue and the three complementary colors cyan, magenta and yellow in the corners.

The diagram S=0..1, V=1 shows the base of the HSV color space in the hexacone display with the full saturated colors of the color circle on the edge and white in the center.  The diagram S=0..1, V=0..1 is a projection of the pyramidal surface on the base. In this case is black in the center, on the edge are again the full saturated colors.

3.4.   HSL color space

The physical brightness of a color can differ from the impression of brightness. The color yellow seems always brighter than the color blue, even if both have the same radiant intensity. The human impression of brightness is described by the luminance L',  which is in the RGB space given by:

    L' = 0.3*R + 0.59*G + 0.11*B    

More often used is the lightness L,  which approximates the feeling of brightness with the formula:

    L = [Max(R,G,B) + Min(R,G,B)] / 2

The HSL space is a double cone with the color circle on the edge of the base (S=100%, L=50%). The central axis contains the gray shades (S=0) from black in the lower corner (S=0, L=0) to white in the upper corner (S=0, L=100%). 

Similar as in the HSV model, the color circle can also in HSL model be replaced by a hexagon. The resulting space has the shape of a hexagonal double-pyramid. It is similar to the cube of the RGB model standing on the black corner. The hexagonal bipyramidal HSL space is used for all displays on this page. 

The diagrams show slices parallel to the base. All fields in one slice have the same lightness of  L=25%, L=50% or L=75%. The slice L=50% is the base with the color"circle" (as hexagon) as border and gray in the center. The projections of the pyramids to the base is in the current version not displayed, but some other more exotic projections.

4.    Additive and subtractive color mixing

4.1.   Additive color mixing

The principle of additive mixing applies for the mixture of light. Additive mixing starts with black (no light), to which several spectral colors are added. Mixing red light and green light will give for example yellow light. If blue light is added to the mixture, white light will be obtained. The colors red, green and blue are called base colors of the additive mixing, because all other colors can be created by mixing the three base colors in different ratios. The reason for this behavior is, that the base colors can stimulate the three kinds of cone receptors in the human eye individually (their wavelength is close to the highest sensitivity of the cone cells). Additive mixing is used for color creation on light emitting devices such as TV screens or computer monitors.

Triangular chats are very common in physics or chemistry show properties of 3-component-systems. The corners of the triangle represents the pure components, points on the edge of the triangle are 2-component-mixtures and points within the triangle are mixtures of all 3 components. The amount of each component in a mixture is given by the distance of the position in the triangle and the edge opposite to the corner of the component.

All mixtures in the diagram fixed light intensity have the same brightness, the total of the three colors R, G and B is 255. The base colors in the corners of the triangle have maximum strength (255). In the center is gray with all three colors signals R, G and B on 255/3.

The diagram cumulative 100% shows a real additive mixture of the 3 base colors with maximum brightness (255). In the center is this time white with all 3 color signals R, G and B on 255.

The diagram cumulative 50% shown finally the additive mixture of the base colors with reduced (50%) brightness. Red becomes maroon, light green (lime) becomes dark green and blue becomes navy. In the center is this time again gray.

4.2.   Subtractive color mixing

The concept of subtractive mixture applies to the mixing of colored material such as dyes or pigments. The mixture starts with white (all wavelengths) and single wavelengths are removed one by one. If for example white light hits a material, which absorbs selective the blue light, then the reflected light (and therefore the colored material itself) appears yellow (note 5). Absorption of green out of white light leads accordingly to magenta, a reddish violet. Mixtures of yellow and magenta colored materials absorb blue and green light out of white, and the remaining light (which appears as the color of the mixture) is red. The subtractive mixture of yellow and magenta gives therefore red. Mixing of all 3 base colors of the subtractive mixture (yellow, magenta and cyan) leads theoretical to black, in practice to a dirty brown as not all wavelength are absorbed completely.

Also the subtractive mixture can be displayed in triangle charts, whereas the corners are this time the base colors of the subtractive mixture yellow, magenta and cyan. In the diagram  fixed light intensity all mixtures have the same physical brightness, but this time is the total of R, G and B equivalent to 2*255, because the base colors of the subtractive mixture are on the computer monitor created by the additive mixture of two base colors of red, green and blue (for example yellow as mixture of red and green, each with a signal of 255). All mixed colors consist of all 3 components R, G and B and contain therefore a certain amount of white, which makes the colors pale. The center is gray with R=G=B=2*255/3.

The chart 3-color print simulates the printing process of colored prints. Colored prints are for example in the offset 3-color printing technology created by the subsequent printing of the 3 process colors yellow, magenta and cyan on white paper. The first color printed is usually yellow followed by magenta or cyan. The pigments used for magenta and cyan need therefore a good transparency, because they must leave the light from lower color layers through. If for example the two colors yellow and cyan, but not magenta are printed at the same position on white paper, then the double layer absorbs blue and red light and only green is left through, why the print appears green. Printing of all 3 process colors at the same position gives a brownish black. For a better contrast, black is normally added as separate color, this process is then called 4-color printing. 

The diagram color blend shows finally the behavior of a mixture of colored materials. All mixtures contain a certain amount of white and are darker as the single components, because the mixture absorbs several colors and therefore more energy simultaneously. The mixed color appears as a consequence duller than the base colors. The mixture of all 3 components gives dark gray (equal absorption of all wavelength) or brown (unequal absorption). Die chart simulates subsequent reflection from 3 colored particles with an absorption rate of 90% for the absorbed color and an absorption of 10% for the reflected colors for each of the three reflections.

4.3.   Color table

*) Magenta not a spectral color, but also a fully saturated color and part of the color circle

Notes

Note 1: The reason for the diffraction is, that the speed of light is reduced when entering an “optical dense” material such as glass (prism) or water. This change of speed causes a light ray to change its direction when passing from one material to another with different optical density at an angle different from 90 degrees to the surface between the two materials. The speed of light in the optical dense material depends on its wavelength, and this is the reason why the amount of deviation is depending on the wavelength and therefore on the color of the light.

Note 2: The “spectrum” is historically the color distribution obtained by diffraction of light using a prism. Because each color of the spectrum can be assigned to a wavelength, the “spectrum” can be applied to the wavelength distribution of any radiation.

Note 3: As mentioned in the main text are the cone cells sensitive for a specific range of wavelengths. Light of a specific color creates normally signals in all three kinds of cone cells, but the three signals are different intensive. As example, green light creates a strong signal in the receptors sensitive for green, a weak signal for red and a very weak signal for blue. Yellow light creates moderate signals for red and green and no signal for blue. The three signals are routed to the brain and there converted to an impression of color.

Note 4: There are different possibilities to display the HSV color space. All models have in common, that the hue angle is used to determine the color und a central axis represents the gray scale (S=0) from black (V=0) to white (V=1). The models differ in the way how the saturation is treated.  Most common is the cone model, where the saturation is given by the angle between the gray axis and the connection line between the position in the cone and the edge of the cone  (Link: Mandelbrot-Dazibao- englisch). In the alternative hexacone model, the circular base of the cone with the color circle as border is replaced by a hexagon with the corners red, green, blue and their complementary colors cyan, magenta and yellow. In this model, the HSV space has pyramidal shape and all points on the surface have the maximal saturation. One more alternative to use a cylinder form, in which the saturation is given by the distance from the central gray axis (Link: Uni Dortmund - german).

Note 5: A colored substance appears under white illumination in the complementary color of the absorbed light. As example, the yellow pigments in a flower leaf absorb the blue part of the spectrum. A pigment, which absorbs red light, appears in the complementary color cyan. A material, which absorbs the green part of the spectrum, has the color magenta.  The base colors of the subtractive mixing are therefore the complementary colors to the base colors of the additive mixing.

Weblinks:

Metacolor.de - Theory of colors, color design, color psychology, colors in web design (comprehensive tutorial with many demonstrations) [german]

December - Samples, names and color space codes of all colors on a RGB monitor [german]

ZUM.de / Gebhardt - Interactive JavaSkript modules for color mixing and complementary colors [german]

schulphysik.de / Dukes - Interaktive Java applet for color mixing [english]

EasyRGB.com - Formulae and program codes for the conversion of color space coordinates [english]

Janott.com - Program for display of colors by additive RGB mixing (for web design) [german]

Grokking the GIMP - Comprehensive tutorial for color spaces [english]

index        xChem directory

© Wolfgang Schäfer, Seoul / Korea and Hölstein/Switzerland, 2005-2011; last update: 5th December 2010