18 Color Models
T. Raghuveera
Objectives:
- Understand the basic theory of color models and their use in CG
- Learn some of the practical color models in use
Discussion:
The color of an object is the color of the reflected light that is perceived by the human eye in the visible range of the electromagnetic spectrum. The visible wavelengths in the Electromagnetic Spectrum occupy a small range of values between 390 to 700 nm (nano meters) or in frequency terms it is between 430 to 770 THz (Tera Hertz) as shown in the figure below.
Color can be defined through its three characteristics, Hue, Saturation and Luminance. Hue is the dominant wavelength of reflected light that we perceive; Saturation is the purity of the color, and Luminance is the lightness or intensity of the color. Hue and saturation are called the chroma components of color and Luminance is called the Luma component of color. Two different light sources with suitably chosen intensities can be used to produce a range of other colors. If the two sources combine to produce white light, they are referred to as complementary colors.
Color models use two or three colors, which are combined in various proportions to produce a wide range of colors called the color gamut for that color model. The two or three colors used to produce other colors in a color model are referred to as primary colors.
For the RGB color model, the primary colors are the Red, Green and Blue and any possible color Cλ in its color gamut can be modeled by the equation
Cλ = rR+gG+bB
Color Matching Functions:
The amounts of Red, Green and Blue needed to produce any spectral color can be represented through color matching functions as shown in the figure below.
For example, in the wavelength range near to 500 nm, any color Cλ can be modeled with the equation
Cλ = 0.7R+0.5G-0.2B
The CIE (Commission Internationale del’ Éclairage) color model:
This is a theoretical color model with three imaginary primaries X, Y, Z and this is used to understand the fundamental concepts of a color model: the color gamut, dominant wavelength, complimentary colors, and saturation. Let’s assume that, X, Y, Z represent vectors in a 3D additive color space. Any color Cλ can be modeled using the equation
Cλ = aX+bY+cZ
Where a, b, c are the actual amounts of standard primaries needed to match the color Cλ. Since the actual amounts are only imaginary, the normalized amounts are to be computed. Let the normalized amounts of the three primaries be represented as a’, b’, c’ where
Where the normalized amounts satisfy the condition a’+b’+c’=1. Now it is required to convert the normalized amounts to actual amounts as and when needed. But given the three normalized amounts, the actual amounts cannot be computed unless we have information about any one of the actual amounts. Suppose we are given values of a’ and b’, using the above condition, we can easily find the value of c’. But we cannot determine the values of a, b, c. But it is possible only when we get to know the values of one of the actual amounts, along with two normalized amounts. Now say, we are given the values of a’, b’, and b, we can easily compute c’, and the other actual amounts a and c by taking ratio of a’ and b’ and ratio of a’ and c’.
Three imaginary primaries called CIE primaries are chosen. They are defined mathematically with positive color-matching functions as shown in the figure below.
From the above diagram, it is evident that any color Cλ is an additive combination of the three primaries X, Y, Z. The two normalized amounts are graphically drawn against each other to form chromaticity diagram, while luminance values are not available in the chromaticity diagram because of normalization. The chromaticity diagram is shown below. The tongue shaped figure, has Red at one end and Violet at the other end. An imaginary purple line connects the two ends. The purple line is not part of the spectrum. Color C, at the centre of the shape, is a white light source known as illuminant which is used as a standard approximation for average day light, and all the pure colors are along the boundary of the shape.
The chromaticity diagram is useful for the following:
- Comparing color gamut’s for different sets of primaries
- Identifying complementary colors
- Determining dominant wavelength
- Determining the purity of a given color
The three figures in a row below help us understand the concepts better:
Refer to Figure 1 below: Color gamut’s are represented as straight line segments or as polygons. Color gamut for color model formed by two primaries C1, C2 can be identified as, all the colors along the line joining C1, C2 which can be obtained by mixing appropriate amounts of colors C1, C2. Color gamut for the three color primaries C3, C4, C5 is shown as a triangle. Refer to figure 2 below: Any straight line passing through white will have complementary colors on either sides of white.
A straight line joining any boundary point and White will determine the dominant wavelength for any point along that line and it is nothing but the boundary color.
Refer to Figure 3 below: Point Cp is not in the visible spectrum. So for color C2 the dominant hue is the complement of Cp say Csp. Purity or Saturation is determined by the distance of color from the boundary.
Let’s discuss about the popular practical color models in use.
RGB Color Model:
This is the most popular practical color model. The three primaries are the Red (R), Green (G) and Blue (B). The color gamut for this color model is represented by a standard unit cube as shown in the figure below, where the values of R, G, and B range in the interval [0,1]. Any color within the unit cube can be described as an additive combination of the three primaries. Along the three principle axes we have the three primaries, R, G and B. Black is at the origin (0,0,0) of the cube at and White is at the vertex (1,1,1). The imaginary line connecting the Black and White as shown, is the Gray Line.
The figure below demonstrates the RGB color gamut for NTSC chromaticity coordinates.
Illuminant C is at position (0.310, 0.316), with a luminance value of Y = 100.0.
This color model has its practical application in the area of display technology. All the display devices fundamentally use the RGB color model to produce various possible colors. The display devices use additive color mixing to produce other possible colors in the color gamut. In additive color mixing, it starts with darkness and light intensities of various wavelengths are combined in various proportions to produce a wide range of colors. The RGB color model is also referred to as the component color model, since, each of the R, G, B signals are to be sent along three different cables.
CMY Color Model:
This is a practical color model, and its color gamut is represented using a standard unit cube as similar to that of RGB color model, but the difference being that, along the three principle axes, we have now Cyan (C), Magenta (M), and Yellow (Y) colors. At the origin (0,0,0) we have White, and on the diagonally opposite vertex at (1,1,1) we have Black. The imaginary line connecting the White and Black vertices forms the Gray Line.
Actually the C, M, Y are called secondary colors as they can be produced by combination of primary colors R, G, B. As can be seen from the figures above, when all the three, the C, M, Y are combined in their purest forms they are supposed to produce Black. But it is not so, and we get close to 99% Black, and we can make it 100% Black, by adding an extra Black pigment. This technique is used in printing industry, where Black is needed for printing on the paper and the inks used are C, M, Y. The addition of this Black pigment is indicated with a suffix symbol ‘K’ to make it CMYK color model. This color model produces a wide range of colors, using subtractive color mixing technology. In this technique a wide range of colors are produced, by subtracting some wavelengths partially or completely using dyes or filters of C, M, Y as required. Since Cyan is opposite to Red, Cyan absorbs Red and so are the other colors. Suppose we want to have Red, we can pass white light through Magenta and Yellow filters successively so that only Red comes out of the filters. This is because white light has RGB components, and when white light passes through Magenta filter, it absorbs the Green component and allows the other wavelengths to pass through, and later when the remaining wavelengths are let through Yellow filter, it absorbs the Blue wavelengths and allows only Red to pass through, thus we get Red. It is also simple to convert between the two color models RGB and CMY.
The color gamut for this color model has the 2D shape as shown above. It can be observed that the color gamut for RGB color model is relatively bigger than that of the color gamut for CMY. This indicates that some colors that are possible in the RGB color model may not possible to produce in the CMY color model and these colors are called out–of–gamut colors for the CMY color model.
YUV / YIQ / YCbCr color model:
This is a practical color model, with Y as the luminance parameter, I,Q representing the chroma parameters. A combination of RGB intensities are chosen for Y for the luminosity curve. Parameter I contains orange-cyan hue and Q carries green-magenta hue. Its applications are in the Television broadcast industry, video capture, storage and use. This color model is also referred to as composite color model, since Y, I, Q are composited into a single signal, and transmitted along a single cable. At the receiving end, the single composite signal is divided into the three components Y, I, Q. The conversion between RGB and YIQ is computed as shown.
Some of the standards for YUV are 4:1:1, 4:2:0 and so on. For Example the 4:1:1 standard says that for every 4 pixels along a row, the first pixel is assigned with all the three Y, U, V values, while for the remaining three pixels only Y value is assigned. The bandwidth occupied by the two chroma parameters together (U+V), is exactly half of that of the luma parameter Y. For this reason this color model is preferred for Television broadcast, where bandwidth consumption should be minimal and data should be transmitted in real-time.
HSV Color model:
H stands for Hue, and is measured as an angle in the interval [0, 360°]. S stands for Saturation and is measured as a value in the interval [0,1]. V stands for Value, and is measured in the interval [0,1]. The color gamut for this color model is represented in the shape of a Hexcone, short form of Hexagonal Cone as shown.
The following points are observed from the figure above,
- H = angle measured around the Hexcone
- V = the Value axis, that starts at the vertex of the Hexcone and goes vertically upwards
- S = 0, at the centre along the V-axis
- S=1, on the outer boundary of the Hexcone
- V=0 at the bottom of Hexcone
- V=1 on the top plane of the Hexcone
Any color in this color model is identified with three values H, S and V. At every 60°, starting with Red at 0° on the top plane and along the boundary of the Hexcone, we have pure colors. Black is at the vertex of the Hexcone and White is at the centre of the top plane of the Hexcone. The line connecting the Black and White is the Gray line. Complimentary colors are 180° degrees apart.
- Adding black pigment to a color produces shade of that color
- Adding white pigment to a color produces tint of that color
- Adding both black and white pigments produces tone of that color
The table above clearly defines how the color gamut for this color model is spread within the volume of the Hexcone. For Ex: if we want a shade of Green, then H=120°, S=1, V=0 to 1. The pure colors occupy the top plane and are on the boundary of the Hexcone. The central vertical line connecting the Black and White is the Gray Line. The Shades occupy the outer boundary of the Hexcone from top the bottom. The Tints occupy the top plane of the Hexcone ranging from the centre to the boundary. All the colors that occupy the inside volume of the Hexcone are the Tones. This is a practical color model, with its applications in Digital Image Processing. In particular the color of the Human skin is best represented in the HSV color model.
Conversion between RGB and HSV:
Let’s see whether we can convert between RGB and HSV. RGB color gamut is represented as a standard unit cube, while the HSV is represented with a Hexagonal Cone. If we observe the two shapes closely they are similar in one perspective. The standard cube when observed along the diagonal (Gray Line) appears to be a Hexagon with White at the centre. Similarly the Hexcone appears as a Hexagon when observed from top along the Gray Line. Each subcube of the RGB cube corresponds to a hexagonal cross-sectional area of the Hexcone.
R, G, B values are from 0 to 1, while H = [0,360], S = [0,1], V = [0,1]
RGB TO HSV:
- For any set of RGB values, V is equal to the maximum value in the set.
- The HSV point corresponding to the set of RGB values lies on the hexagonal cross section at value V.
- Parameter S is determined as the relative distance of this point from the V axis.
- Parameter H is determined by calculating the relative position of the point within each sextant of the hexagon.
Algorithm to convert from RGB to HSV:
|
/Input: r,g,b values are from 0 to 1 //Output: h = [0,360], s = [0,1], v = [0,1] //if s == 0, then h = -1 (undefined) void RGBtoHSV( float r, float g, float b, float h, float s, float v) { float min, max, delta; min = MIN( r, g, b ); max = MAX( r, g, b ); v = max; delta = max – min; if( max != 0 ) // V is set as the maximum of R,G,B s = delta / max; // s is set here as the ratio of delta and max of RGB else { s = 0; h = -1; return; } if( r == max ) h = ( g – b ) / delta; // between yellow & magenta else if( g == max ) h = 2 + ( b – r ) / delta; // between cyan & yellow else h *= 60; if( h < 0 ) h = 4 + ( r – g ) / delta; // between magenta & cyan // degrees h += 360; }/ |
The above algorithm is simple to understand and is self-explanatory. V is the maximum of the three values of RGB. Since RGB values are given in the range [0,1], while H in HSV is angle around the Hexcone in the range [0 to 360°], we can calculate this as the relative position of the point within each sextant of the hexagon. H is initially computed as a value in the interval [0, 1] and later multiplied with 60 to get the correct position of the color in the sextant. Red is in-between Yellow and Magenta, Green is in-between Cyan and Yellow, Blue is in-between Magenta and Cyan. While we traverse along the boundary of the Hexagon, for Red we shall be adding nothing i.e., 0, for Green we shall be adding two sextants, since it is at 120° from Red, and for Blue we shall be adding 4 sextants, since it is at 240° from Red.
Algorithm to convert from HSV to RGB:
|
void HSVtoRGB( float r, float g, float b, float h, float s, float v ) { int i; float a, b, c, f; if( s == 0 ) { R= G = B = v; return; } else { if (h==1.0) h*=6.0; h=0; i = floor( h ); f = h – i; a= v * ( 1 – s ); b = v * ( 1 – (s * f) ); c= v * ( 1 – (s * ( 1 – f )) ); switch( i ) { case 0: R = v; G= c; B = a; break; case 1: R = b; G = v; B = a; break; case 2: R = a; G = v; B = c; break; case 3: R = a; G = b; B = v; break; case 4: R = c; G = a; B = v; break; default: R = v; G = a; B = b; break; } } } |
HLS Color Model:
This is an extension of the HSV color model and is represented by a Double Hexcone. H stands for Hue, S stands for Saturation and L stands for Lightness. The Hexcone of the HSV model is stretched along the V-axis to form a double Hexcone as shown in the figure below. In this, pure colors lie on the plane at L=0.5, Black at L=0, White at L=1.0. Shades lie on the outer surface of the bottom half of Double Hexcone. Tints lie on the surface of the upper half of the Double Hexcone. Tones occupy the entire inside of the volume of the shape. The central line formed by the L-axis is the Gray Line.
H = angle measured around the Hexcone [0,360°]
S = 0, along the L-axis
S=1, on the outer boundary of the double hexcone
L=0 at the bottom of double hexcone
L=1 on the top vertex of the double hexcone
The table below shows the values of H, S, L for various colors.
| Hue (H) | Saturation (S) | Value (V) | |
| Pure | 0° to 360° | S=1 | V=0.5 |
| Gray | 0° to 360° | S=0 | V=0 to 1 |
| Shades | 0° to 360° | S=1 | V=0 to 0.5 |
| Tints | 0° to 360° | S=1 | V=0.5 to 1 |
| Tones | 0° to 360° | S=0 to 1 | V=0 to 1 |
Summary:
- Learnt color theory (definitions and imaginary color model).
- Thoroughly examined Practical color models (RGB, CMY, YIQ, HSV, HLS)
