{"id":326,"date":"2018-07-21T05:38:44","date_gmt":"2018-07-21T05:38:44","guid":{"rendered":"http:\/\/csp06.epgpbooks.inflibnet.ac.in\/?post_type=chapter&#038;p=326"},"modified":"2018-08-06T09:55:06","modified_gmt":"2018-08-06T09:55:06","slug":"color-models","status":"publish","type":"chapter","link":"https:\/\/ebooks.inflibnet.ac.in\/csp06\/chapter\/color-models\/","title":{"rendered":"Color Models"},"content":{"raw":"<div>\r\n\r\n&nbsp;\r\n\r\n<strong>Objectives:<\/strong>\r\n<ul>\r\n \t<li>Understand the basic theory of color models and their use in CG<\/li>\r\n \t<li>Learn some of the practical color models in use<\/li>\r\n<\/ul>\r\n&nbsp;\r\n\r\n<strong>Discussion:<\/strong>\r\n\r\n&nbsp;\r\n<p style=\"text-align: justify\">The <em>color<\/em> 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 <em>wavelengths<\/em> in the Electromagnetic Spectrum occupy a small range of values between 390 to 700 nm (nano meters) or in <em>frequency<\/em> terms it is between 430 to 770 THz (Tera Hertz) as shown in the figure below.<\/p>\r\n\r\n<\/div>\r\n<img class=\"size-full wp-image-328 aligncenter\" src=\"http:\/\/csp06.epgpbooks.inflibnet.ac.in\/wp-content\/uploads\/sites\/52\/2018\/07\/1-232.png\" alt=\"\" width=\"628\" height=\"173\" \/>\r\n<div>\r\n\r\n&nbsp;\r\n<p style=\"text-align: justify\">Color can be defined through its three characteristics, <em>Hue<\/em>, <em>Saturation<\/em> and <em>Luminance<\/em>. <em>Hue<\/em> is the dominant wavelength of reflected light that we perceive; <em>Saturation<\/em> is the purity of the color, and <em>Luminance<\/em> is the lightness or intensity of the color. <em>Hue<\/em> and <em>saturation<\/em> are called the <em>chroma <\/em>components of color and Luminance is called the<em> Luma <\/em>component of color. Two different light sources with suitably chosen intensities can be used to produce a range of other\u00a0<span style=\"text-align: initial;font-size: 1em\">colors. If the two sources combine to produce white light, they are referred to as <\/span><em style=\"text-align: initial;font-size: 1em\">complementary<\/em> <em style=\"text-align: initial;font-size: 1em\">colors<\/em><span style=\"text-align: initial;font-size: 1em\">.<\/span><\/p>\r\n\r\n<\/div>\r\n<div>\r\n<p style=\"text-align: justify\"><em>Color models <\/em>use<em> two <\/em>or<em> three <\/em>colors, which are combined in various proportions to produce a wide range of colors called the <em>color gamut<\/em> for that color model. The two or three colors used to produce other colors in a color model are referred to as <em>primary colors<\/em>.<\/p>\r\n&nbsp;\r\n<p style=\"text-align: justify\">For the RGB color model, the primary colors are the Red, Green and Blue and any possible color C\u03bb in its color gamut can be modeled by the equation<\/p>\r\n<p style=\"text-align: center\">C\u03bb = rR+gG+bB<\/p>\r\n&nbsp;\r\n\r\n<strong>Color Matching Functions:<\/strong>\r\n\r\n&nbsp;\r\n<p style=\"text-align: justify\">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.<\/p>\r\n&nbsp;\r\n\r\n&nbsp;\r\n\r\n<img class=\"size-full wp-image-330 aligncenter\" src=\"http:\/\/csp06.epgpbooks.inflibnet.ac.in\/wp-content\/uploads\/sites\/52\/2018\/07\/1-233.png\" alt=\"\" width=\"228\" height=\"152\" \/>\r\n\r\n&nbsp;\r\n<p style=\"text-align: justify\">For example, in the wavelength range near to 500 nm, any color C\u03bb can be modeled with the equation<\/p>\r\n<p style=\"text-align: center\">C\u03bb = 0.7R+0.5G-0.2B<\/p>\r\n&nbsp;\r\n\r\n&nbsp;\r\n\r\n<strong>The CIE (Commission Internationale del\u2019 \u00c9clairage) color model:<\/strong>\r\n\r\n&nbsp;\r\n<p style=\"text-align: justify\">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\u2019s assume that, X, Y, Z represent vectors in a 3D additive color space. Any color C\u03bb can be modeled using the equation<\/p>\r\n&nbsp;\r\n<p style=\"text-align: center\">C\u03bb = <em>a<\/em>X+<em>b<\/em>Y+<em>c<\/em>Z<\/p>\r\n&nbsp;\r\n<p style=\"text-align: justify\">Where <em>a<\/em>, <em>b<\/em>, <em>c<\/em> are the actual amounts of standard primaries needed to match the color C\u03bb. 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 <em>a<\/em>\u2019, <em>b<\/em>\u2019, <em>c<\/em>\u2019 where<\/p>\r\n<img class=\"size-full wp-image-331 aligncenter\" src=\"http:\/\/csp06.epgpbooks.inflibnet.ac.in\/wp-content\/uploads\/sites\/52\/2018\/07\/1-234.png\" alt=\"\" width=\"315\" height=\"51\" \/>\r\n\r\n&nbsp;\r\n\r\n&nbsp;\r\n<p style=\"text-align: justify\">Where the normalized amounts satisfy the condition <em>a<\/em>\u2019+<em>b<\/em>\u2019+<em>c<\/em>\u2019=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 <em>a<\/em>\u2019 and <em>b<\/em>\u2019, using the above condition, we can easily find the value of <em>c<\/em>\u2019. But we cannot determine the values of <em>a<\/em>, <em>b<\/em>, <em>c<\/em>. But it is possible only when we get to know the values of one of the actual amounts, along with two normalized\u00a0<span style=\"text-align: initial;font-size: 1em\">amounts. Now say, we are given the values of <\/span><em style=\"text-align: initial;font-size: 1em\">a<\/em><span style=\"text-align: initial;font-size: 1em\">\u2019, <\/span><em style=\"text-align: initial;font-size: 1em\">b<\/em><span style=\"text-align: initial;font-size: 1em\">\u2019, and <\/span><em style=\"text-align: initial;font-size: 1em\">b<\/em><span style=\"text-align: initial;font-size: 1em\">, we can easily compute <\/span><em style=\"text-align: initial;font-size: 1em\">c<\/em><span style=\"text-align: initial;font-size: 1em\">\u2019, and the other actual amounts <\/span><em style=\"text-align: initial;font-size: 1em\">a<\/em><span style=\"text-align: initial;font-size: 1em\"> and <\/span><em style=\"text-align: initial;font-size: 1em\">c<\/em><span style=\"text-align: initial;font-size: 1em\"> by taking ratio of a\u2019 and b\u2019 and ratio of a\u2019 and c\u2019.<\/span><\/p>\r\n\r\n<\/div>\r\n<div>\r\n\r\n<img class=\"size-full wp-image-332 aligncenter\" src=\"http:\/\/csp06.epgpbooks.inflibnet.ac.in\/wp-content\/uploads\/sites\/52\/2018\/07\/1-235.png\" alt=\"\" width=\"126\" height=\"46\" \/>\r\n\r\n&nbsp;\r\n<p style=\"text-align: justify\">Three imaginary primaries called CIE primaries are chosen. They are defined mathematically with positive color-matching functions as shown in the figure below.<\/p>\r\n&nbsp;\r\n\r\n&nbsp;\r\n\r\n<img class=\"size-full wp-image-333 aligncenter\" src=\"http:\/\/csp06.epgpbooks.inflibnet.ac.in\/wp-content\/uploads\/sites\/52\/2018\/07\/1-236.png\" alt=\"\" width=\"263\" height=\"156\" \/>\r\n\r\n&nbsp;\r\n<p style=\"text-align: justify\">From the above diagram, it is evident that any color C\u03bb 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 <em>Red<\/em> at one end and <em>Violet<\/em> at the other end. An imaginary purple line connects the two ends. The purple line is not part of the spectrum. Color <em>C<\/em>, at the centre of the shape, is a white light source known as <em>illuminant<\/em> which is used as a standard approximation for average day light, and all the pure colors are along the boundary of the shape.<\/p>\r\n&nbsp;\r\n\r\n<img class=\"size-full wp-image-334 aligncenter\" src=\"http:\/\/csp06.epgpbooks.inflibnet.ac.in\/wp-content\/uploads\/sites\/52\/2018\/07\/1-237.png\" alt=\"\" width=\"234\" height=\"213\" \/>\r\n\r\n&nbsp;\r\n\r\nThe chromaticity diagram is useful for the following:\r\n<ul>\r\n \t<li>Comparing color gamut\u2019s for different sets of primaries<\/li>\r\n \t<li>Identifying complementary colors<\/li>\r\n \t<li>Determining dominant wavelength<\/li>\r\n \t<li>Determining the purity of a given color<\/li>\r\n<\/ul>\r\n&nbsp;\r\n\r\nThe three figures in a row below help us understand the concepts better:\r\n\r\n&nbsp;\r\n<p style=\"text-align: justify\">Refer to Figure 1 below: Color gamut\u2019s 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.\u00a0<span style=\"font-size: 1em;text-align: initial\">Refer to figure 2 below: Any straight line passing through white will have complementary colors on either sides of white.<\/span><\/p>\r\n\r\n<\/div>\r\n<div>\r\n<p style=\"text-align: justify\">A straight line joining any boundary point and White will determine the <em>dominant wavelength<\/em> for any point along that line and it is nothing but the boundary color.<\/p>\r\n&nbsp;\r\n<p style=\"text-align: justify\">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. <em>Purity<\/em> or <em>Saturation<\/em> is determined by the distance of color from the boundary.<\/p>\r\n&nbsp;\r\n\r\n<img class=\"size-full wp-image-335 aligncenter\" src=\"http:\/\/csp06.epgpbooks.inflibnet.ac.in\/wp-content\/uploads\/sites\/52\/2018\/07\/1-238.png\" alt=\"\" width=\"413\" height=\"185\" \/>\r\n\r\n&nbsp;\r\n\r\nLet\u2019s discuss about the popular practical color models in use.\r\n\r\n&nbsp;\r\n\r\n<strong>RGB Color Model:<\/strong>\r\n\r\n&nbsp;\r\n<p style=\"text-align: justify\">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.<\/p>\r\n&nbsp;\r\n\r\n<img class=\"size-full wp-image-336 aligncenter\" src=\"http:\/\/csp06.epgpbooks.inflibnet.ac.in\/wp-content\/uploads\/sites\/52\/2018\/07\/1-239.png\" alt=\"\" width=\"570\" height=\"221\" \/>\r\n\r\n&nbsp;\r\n\r\nThe\u00a0 figure\u00a0 below\u00a0 demonstrates \u00a0the RGB\u00a0 color\u00a0 gamut\u00a0 for\u00a0 NTSC chromaticity\u00a0 coordinates.\r\n\r\nIlluminant C is at position (0.310, 0.316), with a luminance value of Y = 100.0.\r\n\r\n<\/div>\r\n<div>\r\n\r\n<img class=\"size-full wp-image-337 aligncenter\" src=\"http:\/\/csp06.epgpbooks.inflibnet.ac.in\/wp-content\/uploads\/sites\/52\/2018\/07\/1-240.png\" alt=\"\" width=\"361\" height=\"187\" \/>\r\n\r\n<\/div>\r\n&nbsp;\r\n<div>\r\n<p style=\"text-align: justify\">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 <em>additive color mixing<\/em> 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 <em>component<\/em> color model, since, each of the R, G, B signals are to be sent along three different cables.<\/p>\r\n&nbsp;\r\n\r\n<strong>CMY Color Model:<\/strong>\r\n\r\n&nbsp;\r\n<p style=\"text-align: justify\">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.<\/p>\r\n&nbsp;\r\n\r\n<img class=\"size-full wp-image-338 aligncenter\" src=\"http:\/\/csp06.epgpbooks.inflibnet.ac.in\/wp-content\/uploads\/sites\/52\/2018\/07\/1-241.png\" alt=\"\" width=\"438\" height=\"184\" \/>\r\n\r\n&nbsp;\r\n<p style=\"text-align: justify\">Actually the C, M, Y are called <em>secondary colors<\/em> as they can be produced by combination of <em>primary colors<\/em> 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 \u2018<em>K<\/em>\u2019 to make it CMYK color model. This color model produces a wide range of colors, using <em>subtractive color mixing<\/em> 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\u00a0<span style=\"font-size: 1em;text-align: initial\">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.<\/span><\/p>\r\n\r\n<\/div>\r\n<div>\r\n\r\n<img class=\"size-full wp-image-339 aligncenter\" src=\"http:\/\/csp06.epgpbooks.inflibnet.ac.in\/wp-content\/uploads\/sites\/52\/2018\/07\/1-242.png\" alt=\"\" width=\"296\" height=\"253\" \/>\r\n\r\n&nbsp;\r\n<p style=\"text-align: justify\">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 <em>out<\/em>-<em>of<\/em>-<em>gamut<\/em> colors for the CMY color model.<\/p>\r\n&nbsp;\r\n\r\n<strong>YUV \/ YIQ \/ YC<\/strong><strong>b<\/strong><strong>C<\/strong><strong>r<\/strong><strong> color model:<\/strong>\r\n\r\n&nbsp;\r\n<p style=\"text-align: justify\">This is a practical color model, with <strong><em>Y<\/em><\/strong> as the luminance parameter, <strong><em>I<\/em>,<em>Q<\/em><\/strong> representing the c<em>hroma<\/em> parameters. A combination of RGB intensities are chosen for <strong><em>Y<\/em><\/strong> for the luminosity curve. Parameter <strong><em>I<\/em><\/strong> contains orange-cyan hue and <strong><em>Q<\/em><\/strong> 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 <em>composite<\/em> 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.<\/p>\r\n<img class=\"size-full wp-image-340 aligncenter\" src=\"http:\/\/csp06.epgpbooks.inflibnet.ac.in\/wp-content\/uploads\/sites\/52\/2018\/07\/1-243.png\" alt=\"\" width=\"493\" height=\"71\" \/>\r\n\r\n&nbsp;\r\n<p style=\"text-align: justify\">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 <strong>Y<\/strong> value is assigned. The bandwidth occupied by the two <em>chroma<\/em> parameters together (<em>U<\/em>+<em>V<\/em>), is exactly half of that of the <em>luma<\/em> 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.<\/p>\r\n&nbsp;\r\n\r\n<strong>HSV Color model:<\/strong>\r\n\r\n&nbsp;\r\n<p style=\"text-align: justify\"><strong>H <\/strong>stands for Hue, and is measured as an angle in the interval [0, 360\u00b0].<strong> S <\/strong>stands for Saturation and is measured as a value in the interval [0,1]. <strong>V<\/strong> stands for Value, and is measured\u00a0<span style=\"text-align: initial;font-size: 1em\">in the interval [0,1]. The color gamut for this color model is represented in the shape of a <\/span><em style=\"text-align: initial;font-size: 1em\">Hexcone<\/em><span style=\"text-align: initial;font-size: 1em\">, short form of<\/span><em style=\"text-align: initial;font-size: 1em\"> Hexagonal Cone <\/em><span style=\"text-align: initial;font-size: 1em\">as shown.<\/span><\/p>\r\n\r\n<\/div>\r\n<div>\r\n\r\n<img class=\"size-full wp-image-341 aligncenter\" src=\"http:\/\/csp06.epgpbooks.inflibnet.ac.in\/wp-content\/uploads\/sites\/52\/2018\/07\/1-244.png\" alt=\"\" width=\"287\" height=\"249\" \/>\r\n\r\n&nbsp;\r\n\r\n&nbsp;\r\n\r\nThe following points are observed from the figure above,\r\n<ul>\r\n \t<li>H = angle measured around the Hexcone<\/li>\r\n \t<li>V = the Value axis, that starts at the vertex of the Hexcone and goes vertically\u00a0 upwards<\/li>\r\n \t<li>S = 0, at the centre along the V-axis<\/li>\r\n \t<li>S=1, on the outer boundary of the Hexcone<\/li>\r\n \t<li>V=0 at the bottom of Hexcone<\/li>\r\n \t<li>V=1 on the top plane of the Hexcone<\/li>\r\n<\/ul>\r\n&nbsp;\r\n\r\n<img class=\"size-full wp-image-342 aligncenter\" src=\"http:\/\/csp06.epgpbooks.inflibnet.ac.in\/wp-content\/uploads\/sites\/52\/2018\/07\/1-245.png\" alt=\"\" width=\"412\" height=\"222\" \/>\r\n<p style=\"text-align: justify\">Any color in this color model is identified with three values H, S and V. At every 60\u00b0, starting with Red at 0\u00b0 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\u00b0 degrees apart.<\/p>\r\n\r\n<ul>\r\n \t<li>Adding black pigment to a color produces <em>shade<\/em> of that color<\/li>\r\n \t<li>Adding white pigment to a color produces <em>tint<\/em> of that color<\/li>\r\n \t<li>Adding both black and white pigments produces <em>tone<\/em> of that color<\/li>\r\n<\/ul>\r\n<\/div>\r\n<img class=\"size-full wp-image-343 aligncenter\" src=\"http:\/\/csp06.epgpbooks.inflibnet.ac.in\/wp-content\/uploads\/sites\/52\/2018\/07\/1-246.png\" alt=\"\" width=\"381\" height=\"115\" \/>\r\n<div>\r\n\r\n&nbsp;\r\n<p style=\"text-align: justify\">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\u00b0, S=1, V=0 to 1. The <em>pure<\/em> colors occupy the top plane and are on the boundary of the Hexcone. The central vertical line connecting the Black and White is the <em>Gray<\/em> Line. The <em>Shades<\/em> occupy the outer boundary of the Hexcone from top the bottom. The <em>Tints<\/em> 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 <em>Tones<\/em>. 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.<\/p>\r\n&nbsp;\r\n\r\n<strong>Conversion between RGB and HSV:<\/strong>\r\n\r\n&nbsp;\r\n<p style=\"text-align: justify\">Let\u2019s 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.<\/p>\r\n\r\n<\/div>\r\n<img class=\"size-full wp-image-344 aligncenter\" src=\"http:\/\/csp06.epgpbooks.inflibnet.ac.in\/wp-content\/uploads\/sites\/52\/2018\/07\/1-247.png\" alt=\"\" width=\"383\" height=\"179\" \/>\r\n<div>\r\n\r\n<img class=\"size-full wp-image-345 aligncenter\" src=\"http:\/\/csp06.epgpbooks.inflibnet.ac.in\/wp-content\/uploads\/sites\/52\/2018\/07\/1-248.png\" alt=\"\" width=\"461\" height=\"242\" \/>\r\n\r\n&nbsp;\r\n<p style=\"text-align: center\">R, G, B values are from 0 to 1, while H = [0,360], S = [0,1], V = [0,1]<\/p>\r\n&nbsp;\r\n\r\n<strong><em>RGB TO HSV:<\/em><\/strong>\r\n<ul>\r\n \t<li>For any set of RGB values, V is equal to the maximum value in the set.<\/li>\r\n \t<li>The HSV point corresponding to the set of RGB values lies on the hexagonal cross section at value V.<\/li>\r\n \t<li>Parameter S is determined as the relative distance of this point from the V axis.<\/li>\r\n \t<li style=\"text-align: justify\">Parameter H is determined by calculating the relative position of the point within each sextant of the hexagon.<\/li>\r\n<\/ul>\r\n&nbsp;\r\n\r\n<strong>Algorithm to convert from RGB to HSV:<\/strong>\r\n\r\n<\/div>\r\n<table style=\"border-collapse: collapse;width: 100%\" border=\"1\">\r\n<tbody>\r\n<tr>\r\n<td style=\"width: 100%\">\r\n<div>\r\n\r\n\/Input: r,g,b values are from 0 to 1\r\n\r\n\/\/Output: h = [0,360], s = [0,1], v = [0,1]\r\n\r\n\/\/if s == 0, then h = -1 (undefined)\r\n\r\nvoid RGBtoHSV( float r, float g, float b, float h, float s, float v)\r\n\r\n{\r\n\r\n<\/div>\r\n<div>\r\n\r\n\u00a0 float min, max, delta;\r\n\r\nmin = MIN( r, g, b );\r\n\r\nmax = MAX( r, g, b );\r\n\r\nv = max;\r\n\r\ndelta = max - min;\r\n\r\nif( max != 0 )\r\n\r\n\/\/ V is set as the maximum of R,G,B\r\n\r\n<span style=\"text-align: initial;font-size: 1em\">s = delta \/ max; \/\/ s is set here as the ratio of <\/span><em style=\"text-align: initial;font-size: 1em\">delta<\/em><span style=\"text-align: initial;font-size: 1em\"> and <\/span><em style=\"text-align: initial;font-size: 1em\">max<\/em><span style=\"text-align: initial;font-size: 1em\"> of RGB<\/span>\r\n\r\n<span style=\"text-align: initial;font-size: 1em\">else {<\/span>\r\n\r\n<span style=\"text-align: initial;font-size: 1em\">s = 0;<\/span>\r\n\r\n<span style=\"text-align: initial;font-size: 1em\">h = -1;<\/span>\r\n\r\n<span style=\"text-align: initial;font-size: 1em\">return;<\/span>\r\n\r\n<span style=\"text-align: initial;font-size: 1em\">}<\/span>\r\n\r\n<span style=\"text-align: initial;font-size: 1em\">if( r == max )<\/span>\r\n\r\n<span style=\"font-size: 1em;text-align: initial\">h = ( g - b ) \/ delta;<\/span>\r\n\r\n<span style=\"text-align: initial;font-size: 1em\">\/\/ between yellow &amp; magenta<\/span>\r\n\r\n<span style=\"font-size: 1em;text-align: initial\">else if( g == max )<\/span>\r\n\r\n<span style=\"font-size: 1em;text-align: initial\">h = 2 + ( b - r ) \/ delta;<\/span>\r\n\r\n<span style=\"text-align: initial;font-size: 1em\">\/\/ between cyan &amp; yellow<\/span>\r\n\r\n<span style=\"font-size: 1em;text-align: initial\">else<\/span>\r\n\r\n<span style=\"font-size: 1em;text-align: initial\">h *= 60;<\/span>\r\n\r\n<span style=\"text-align: initial;font-size: 1em\">if( h &lt; 0 )<\/span>\r\n\r\n<span style=\"text-align: initial;font-size: 1em\">h = 4 + ( r - g ) \/ delta;<\/span>\r\n\r\n<span style=\"text-align: initial;font-size: 1em\">\/\/ between magenta &amp; cyan<\/span>\r\n\r\n<span style=\"text-align: initial;font-size: 1em\">\/\/ degrees<\/span>\r\n\r\n<span style=\"font-size: 1em;text-align: initial\">h += 360;<\/span>\r\n\r\n<span style=\"font-size: 1em;text-align: initial\">}\/<\/span>\r\n\r\n<\/div><\/td>\r\n<\/tr>\r\n<\/tbody>\r\n<\/table>\r\n<div>\r\n<p style=\"text-align: justify\">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\u00b0], 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\u00b0 from Red, and for Blue we shall be adding 4 sextants, since it is at 240\u00b0 from Red.<\/p>\r\n&nbsp;\r\n\r\n<strong>Algorithm to convert from HSV to RGB:<\/strong>\r\n\r\n<\/div>\r\n<table style=\"border-collapse: collapse;width: 100%\" border=\"1\">\r\n<tbody>\r\n<tr>\r\n<td style=\"width: 100%\">\r\n<div>\r\n\r\nvoid HSVtoRGB( float r, float g, float b, float h, float s, float v )\r\n\r\n{\r\n\r\nint i;\r\n\r\nfloat a, b, c, f;\r\n\r\nif( s == 0 ) {\r\n\r\nR= G = B = v;\r\n\r\nreturn;\r\n\r\n}\r\n\r\n<span style=\"font-size: 1em;text-align: initial\">else {<\/span>\r\n\r\n<span style=\"text-align: initial;font-size: 1em\">if (h==1.0)<\/span>\r\n\r\n<span style=\"text-align: initial;font-size: 1em\">h*=6.0;<\/span>\r\n\r\n<span style=\"text-align: initial;font-size: 1em\">h=0;<\/span>\r\n\r\n<span style=\"font-size: 1em;text-align: initial\">i = floor( h );<\/span>\r\n\r\n<span style=\"text-align: initial;font-size: 1em\">f = h - i;<\/span>\r\n\r\n<span style=\"text-align: initial;font-size: 1em\">a= v * ( 1 - s );<\/span>\r\n\r\n<span style=\"text-align: initial;font-size: 1em\">b = v * ( 1 \u2013 (s * f) );<\/span>\r\n\r\n<span style=\"text-align: initial;font-size: 1em\">c= v * ( 1 \u2013 (s * ( 1 - f )) );<\/span>\r\n\r\n<span style=\"text-align: initial;font-size: 1em\">switch( i ) {<\/span>\r\n\r\n<span style=\"text-align: initial;font-size: 1em\">case 0:<\/span>\r\n\r\n<span style=\"font-size: 1em;text-align: initial\">R = v;\u00a0<\/span><span style=\"text-align: initial;font-size: 1em\">G= c;\u00a0<\/span><span style=\"text-align: initial;font-size: 1em\">B = a;<\/span>\r\n\r\n<span style=\"text-align: initial;font-size: 1em\">break;<\/span>\r\n\r\n<span style=\"font-size: 1em;text-align: initial\">case 1:<\/span>\r\n\r\n<span style=\"font-size: 1em;text-align: initial\">R = b;\u00a0<\/span><span style=\"text-align: initial;font-size: 1em\">G = v;\u00a0<\/span><span style=\"text-align: initial;font-size: 1em\">B = a;<\/span>\r\n\r\n<span style=\"text-align: initial;font-size: 1em\">break;<\/span>\r\n\r\n<span style=\"font-size: 1em;text-align: initial\">case 2:<\/span>\r\n\r\n<span style=\"font-size: 1em;text-align: initial\">R = a;\u00a0<\/span><span style=\"text-align: initial;font-size: 1em\">G = v;\u00a0<\/span><span style=\"text-align: initial;font-size: 1em\">B = c;<\/span>\r\n\r\n<span style=\"text-align: initial;font-size: 1em\">break;<\/span>\r\n\r\n<span style=\"font-size: 1em;text-align: initial\">case 3:<\/span>\r\n\r\n<span style=\"font-size: 1em;text-align: initial\">R = a;\u00a0<\/span><span style=\"text-align: initial;font-size: 1em\">G = b;\u00a0<\/span><span style=\"text-align: initial;font-size: 1em\">B = v;<\/span>\r\n\r\n<span style=\"text-align: initial;font-size: 1em\">break;<\/span>\r\n\r\n<span style=\"font-size: 1em;text-align: initial\">case 4:<\/span>\r\n\r\n<span style=\"text-align: initial;font-size: 1em\">R = c;\u00a0<\/span><span style=\"text-align: initial;font-size: 1em\">G = a;\u00a0<\/span><span style=\"text-align: initial;font-size: 1em\">B = v;<\/span>\r\n\r\n<span style=\"text-align: initial;font-size: 1em\">break;<\/span>\r\n\r\n<span style=\"font-size: 1em;text-align: initial\">default:<\/span>\r\n\r\n<span style=\"font-size: 1em;text-align: initial\">R = v;\u00a0<\/span><span style=\"text-align: initial;font-size: 1em\">G = a;\u00a0<\/span><span style=\"text-align: initial;font-size: 1em\">B = b;<\/span>\r\n\r\n<span style=\"text-align: initial;font-size: 1em\">break;<\/span>\r\n\r\n<\/div>\r\n<div>\r\n\r\n\u00a0 \u00a0 }\r\n\r\n}\r\n\r\n}\r\n\r\n<\/div><\/td>\r\n<\/tr>\r\n<\/tbody>\r\n<\/table>\r\n<div><span style=\"text-align: justify;font-size: 1em\">In the algorithm given above, the input are the values of H,S, V in the range [0,1] and output are the values of R, G, B in the range [0,1]. The computations are done again for each sextant of the Hexcone.<\/span><\/div>\r\n<div>\r\n\r\n&nbsp;\r\n\r\n<strong>HLS Color Model:<\/strong>\r\n\r\n&nbsp;\r\n<p style=\"text-align: justify\">This is an extension of the HSV color model and is represented by a D<em>ouble Hexcone<\/em>. 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, <em>pure colors<\/em> lie on the plane at L=0.5, Black at L=0, White at L=1.0. <em>Shades<\/em> lie on the outer surface of the bottom half of Double Hexcone. <em>Tints<\/em> lie on the surface of the upper half of the Double Hexcone. <em>Tones<\/em> occupy the entire inside of the volume of the shape. The central line formed by the L-axis is the <em>Gray<\/em> Line.<\/p>\r\n<img class=\"size-full wp-image-346 aligncenter\" src=\"http:\/\/csp06.epgpbooks.inflibnet.ac.in\/wp-content\/uploads\/sites\/52\/2018\/07\/1-249.png\" alt=\"\" width=\"254\" height=\"326\" \/>\r\n\r\n&nbsp;\r\n\r\nH = angle measured around the Hexcone [0,360\u00b0]\r\n\r\nS = 0, along the L-axis\r\n\r\nS=1, on the outer boundary of the double hexcone\r\n\r\nL=0 at the bottom of double hexcone\r\n\r\nL=1 on the top vertex of the double hexcone\r\n\r\n&nbsp;\r\n\r\nThe table below shows the values of H, S, L for various colors.\r\n\r\n&nbsp;\r\n<table class=\"aligncenter\" border=\"1\">\r\n<tbody>\r\n<tr>\r\n<td><\/td>\r\n<td><strong>Hue (H)<\/strong><\/td>\r\n<td><strong>Saturation (S)<\/strong><\/td>\r\n<td><strong>Value (V)<\/strong><\/td>\r\n<\/tr>\r\n<tr>\r\n<td><strong>Pure<\/strong><\/td>\r\n<td>0\u00b0 to 360\u00b0<\/td>\r\n<td>S=1<\/td>\r\n<td>V=0.5<\/td>\r\n<\/tr>\r\n<tr>\r\n<td><strong>Gray<\/strong><\/td>\r\n<td>0\u00b0 to 360\u00b0<\/td>\r\n<td>S=0<\/td>\r\n<td>V=0 to 1<\/td>\r\n<\/tr>\r\n<tr>\r\n<td><strong>Shades<\/strong><\/td>\r\n<td>0\u00b0 to 360\u00b0<\/td>\r\n<td>S=1<\/td>\r\n<td>V=0 to 0.5<\/td>\r\n<\/tr>\r\n<tr>\r\n<td><strong>Tints<\/strong><\/td>\r\n<td>0\u00b0 to 360\u00b0<\/td>\r\n<td>S=1<\/td>\r\n<td>V=0.5 to 1<\/td>\r\n<\/tr>\r\n<tr>\r\n<td><strong>Tones<\/strong><\/td>\r\n<td>0\u00b0 to 360\u00b0<\/td>\r\n<td>S=0 to 1<\/td>\r\n<td>V=0 to 1<\/td>\r\n<\/tr>\r\n<\/tbody>\r\n<\/table>\r\n&nbsp;\r\n\r\n<strong>Summary:<\/strong>\r\n<ul>\r\n \t<li>Learnt color theory (definitions and imaginary color model).<\/li>\r\n \t<li><span style=\"text-align: initial;font-size: 1em\">Thoroughly examined Practical color models (RGB, CMY, YIQ, HSV, HLS)<\/span><\/li>\r\n<\/ul>\r\n<\/div>\r\n<img class=\"size-full wp-image-347 aligncenter\" src=\"http:\/\/csp06.epgpbooks.inflibnet.ac.in\/wp-content\/uploads\/sites\/52\/2018\/07\/1-250.png\" alt=\"\" width=\"641\" height=\"308\" \/>","rendered":"<div>\n<p>&nbsp;<\/p>\n<p><strong>Objectives:<\/strong><\/p>\n<ul>\n<li>Understand the basic theory of color models and their use in CG<\/li>\n<li>Learn some of the practical color models in use<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<p><strong>Discussion:<\/strong><\/p>\n<p>&nbsp;<\/p>\n<p style=\"text-align: justify\">The <em>color<\/em> 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 <em>wavelengths<\/em> in the Electromagnetic Spectrum occupy a small range of values between 390 to 700 nm (nano meters) or in <em>frequency<\/em> terms it is between 430 to 770 THz (Tera Hertz) as shown in the figure below.<\/p>\n<\/div>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-328 aligncenter\" src=\"http:\/\/csp06.epgpbooks.inflibnet.ac.in\/wp-content\/uploads\/sites\/52\/2018\/07\/1-232.png\" alt=\"\" width=\"628\" height=\"173\" srcset=\"https:\/\/ebooks.inflibnet.ac.in\/csp06\/wp-content\/uploads\/sites\/52\/2018\/07\/1-232.png 628w, https:\/\/ebooks.inflibnet.ac.in\/csp06\/wp-content\/uploads\/sites\/52\/2018\/07\/1-232-300x83.png 300w, https:\/\/ebooks.inflibnet.ac.in\/csp06\/wp-content\/uploads\/sites\/52\/2018\/07\/1-232-65x18.png 65w, https:\/\/ebooks.inflibnet.ac.in\/csp06\/wp-content\/uploads\/sites\/52\/2018\/07\/1-232-225x62.png 225w, https:\/\/ebooks.inflibnet.ac.in\/csp06\/wp-content\/uploads\/sites\/52\/2018\/07\/1-232-350x96.png 350w\" sizes=\"auto, (max-width: 628px) 100vw, 628px\" \/><\/p>\n<div>\n<p>&nbsp;<\/p>\n<p style=\"text-align: justify\">Color can be defined through its three characteristics, <em>Hue<\/em>, <em>Saturation<\/em> and <em>Luminance<\/em>. <em>Hue<\/em> is the dominant wavelength of reflected light that we perceive; <em>Saturation<\/em> is the purity of the color, and <em>Luminance<\/em> is the lightness or intensity of the color. <em>Hue<\/em> and <em>saturation<\/em> are called the <em>chroma <\/em>components of color and Luminance is called the<em> Luma <\/em>component of color. Two different light sources with suitably chosen intensities can be used to produce a range of other\u00a0<span style=\"text-align: initial;font-size: 1em\">colors. If the two sources combine to produce white light, they are referred to as <\/span><em style=\"text-align: initial;font-size: 1em\">complementary<\/em> <em style=\"text-align: initial;font-size: 1em\">colors<\/em><span style=\"text-align: initial;font-size: 1em\">.<\/span><\/p>\n<\/div>\n<div>\n<p style=\"text-align: justify\"><em>Color models <\/em>use<em> two <\/em>or<em> three <\/em>colors, which are combined in various proportions to produce a wide range of colors called the <em>color gamut<\/em> for that color model. The two or three colors used to produce other colors in a color model are referred to as <em>primary colors<\/em>.<\/p>\n<p>&nbsp;<\/p>\n<p style=\"text-align: justify\">For the RGB color model, the primary colors are the Red, Green and Blue and any possible color C\u03bb in its color gamut can be modeled by the equation<\/p>\n<p style=\"text-align: center\">C\u03bb = rR+gG+bB<\/p>\n<p>&nbsp;<\/p>\n<p><strong>Color Matching Functions:<\/strong><\/p>\n<p>&nbsp;<\/p>\n<p style=\"text-align: justify\">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.<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-330 aligncenter\" src=\"http:\/\/csp06.epgpbooks.inflibnet.ac.in\/wp-content\/uploads\/sites\/52\/2018\/07\/1-233.png\" alt=\"\" width=\"228\" height=\"152\" srcset=\"https:\/\/ebooks.inflibnet.ac.in\/csp06\/wp-content\/uploads\/sites\/52\/2018\/07\/1-233.png 228w, https:\/\/ebooks.inflibnet.ac.in\/csp06\/wp-content\/uploads\/sites\/52\/2018\/07\/1-233-65x43.png 65w, https:\/\/ebooks.inflibnet.ac.in\/csp06\/wp-content\/uploads\/sites\/52\/2018\/07\/1-233-225x150.png 225w\" sizes=\"auto, (max-width: 228px) 100vw, 228px\" \/><\/p>\n<p>&nbsp;<\/p>\n<p style=\"text-align: justify\">For example, in the wavelength range near to 500 nm, any color C\u03bb can be modeled with the equation<\/p>\n<p style=\"text-align: center\">C\u03bb = 0.7R+0.5G-0.2B<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p><strong>The CIE (Commission Internationale del\u2019 \u00c9clairage) color model:<\/strong><\/p>\n<p>&nbsp;<\/p>\n<p style=\"text-align: justify\">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\u2019s assume that, X, Y, Z represent vectors in a 3D additive color space. Any color C\u03bb can be modeled using the equation<\/p>\n<p>&nbsp;<\/p>\n<p style=\"text-align: center\">C\u03bb = <em>a<\/em>X+<em>b<\/em>Y+<em>c<\/em>Z<\/p>\n<p>&nbsp;<\/p>\n<p style=\"text-align: justify\">Where <em>a<\/em>, <em>b<\/em>, <em>c<\/em> are the actual amounts of standard primaries needed to match the color C\u03bb. 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 <em>a<\/em>\u2019, <em>b<\/em>\u2019, <em>c<\/em>\u2019 where<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-331 aligncenter\" src=\"http:\/\/csp06.epgpbooks.inflibnet.ac.in\/wp-content\/uploads\/sites\/52\/2018\/07\/1-234.png\" alt=\"\" width=\"315\" height=\"51\" srcset=\"https:\/\/ebooks.inflibnet.ac.in\/csp06\/wp-content\/uploads\/sites\/52\/2018\/07\/1-234.png 315w, https:\/\/ebooks.inflibnet.ac.in\/csp06\/wp-content\/uploads\/sites\/52\/2018\/07\/1-234-300x49.png 300w, https:\/\/ebooks.inflibnet.ac.in\/csp06\/wp-content\/uploads\/sites\/52\/2018\/07\/1-234-65x11.png 65w, https:\/\/ebooks.inflibnet.ac.in\/csp06\/wp-content\/uploads\/sites\/52\/2018\/07\/1-234-225x36.png 225w\" sizes=\"auto, (max-width: 315px) 100vw, 315px\" \/><\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p style=\"text-align: justify\">Where the normalized amounts satisfy the condition <em>a<\/em>\u2019+<em>b<\/em>\u2019+<em>c<\/em>\u2019=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 <em>a<\/em>\u2019 and <em>b<\/em>\u2019, using the above condition, we can easily find the value of <em>c<\/em>\u2019. But we cannot determine the values of <em>a<\/em>, <em>b<\/em>, <em>c<\/em>. But it is possible only when we get to know the values of one of the actual amounts, along with two normalized\u00a0<span style=\"text-align: initial;font-size: 1em\">amounts. Now say, we are given the values of <\/span><em style=\"text-align: initial;font-size: 1em\">a<\/em><span style=\"text-align: initial;font-size: 1em\">\u2019, <\/span><em style=\"text-align: initial;font-size: 1em\">b<\/em><span style=\"text-align: initial;font-size: 1em\">\u2019, and <\/span><em style=\"text-align: initial;font-size: 1em\">b<\/em><span style=\"text-align: initial;font-size: 1em\">, we can easily compute <\/span><em style=\"text-align: initial;font-size: 1em\">c<\/em><span style=\"text-align: initial;font-size: 1em\">\u2019, and the other actual amounts <\/span><em style=\"text-align: initial;font-size: 1em\">a<\/em><span style=\"text-align: initial;font-size: 1em\"> and <\/span><em style=\"text-align: initial;font-size: 1em\">c<\/em><span style=\"text-align: initial;font-size: 1em\"> by taking ratio of a\u2019 and b\u2019 and ratio of a\u2019 and c\u2019.<\/span><\/p>\n<\/div>\n<div>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-332 aligncenter\" src=\"http:\/\/csp06.epgpbooks.inflibnet.ac.in\/wp-content\/uploads\/sites\/52\/2018\/07\/1-235.png\" alt=\"\" width=\"126\" height=\"46\" srcset=\"https:\/\/ebooks.inflibnet.ac.in\/csp06\/wp-content\/uploads\/sites\/52\/2018\/07\/1-235.png 126w, https:\/\/ebooks.inflibnet.ac.in\/csp06\/wp-content\/uploads\/sites\/52\/2018\/07\/1-235-65x24.png 65w\" sizes=\"auto, (max-width: 126px) 100vw, 126px\" \/><\/p>\n<p>&nbsp;<\/p>\n<p style=\"text-align: justify\">Three imaginary primaries called CIE primaries are chosen. They are defined mathematically with positive color-matching functions as shown in the figure below.<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-333 aligncenter\" src=\"http:\/\/csp06.epgpbooks.inflibnet.ac.in\/wp-content\/uploads\/sites\/52\/2018\/07\/1-236.png\" alt=\"\" width=\"263\" height=\"156\" srcset=\"https:\/\/ebooks.inflibnet.ac.in\/csp06\/wp-content\/uploads\/sites\/52\/2018\/07\/1-236.png 263w, https:\/\/ebooks.inflibnet.ac.in\/csp06\/wp-content\/uploads\/sites\/52\/2018\/07\/1-236-65x39.png 65w, https:\/\/ebooks.inflibnet.ac.in\/csp06\/wp-content\/uploads\/sites\/52\/2018\/07\/1-236-225x133.png 225w\" sizes=\"auto, (max-width: 263px) 100vw, 263px\" \/><\/p>\n<p>&nbsp;<\/p>\n<p style=\"text-align: justify\">From the above diagram, it is evident that any color C\u03bb 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 <em>Red<\/em> at one end and <em>Violet<\/em> at the other end. An imaginary purple line connects the two ends. The purple line is not part of the spectrum. Color <em>C<\/em>, at the centre of the shape, is a white light source known as <em>illuminant<\/em> which is used as a standard approximation for average day light, and all the pure colors are along the boundary of the shape.<\/p>\n<p>&nbsp;<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-334 aligncenter\" src=\"http:\/\/csp06.epgpbooks.inflibnet.ac.in\/wp-content\/uploads\/sites\/52\/2018\/07\/1-237.png\" alt=\"\" width=\"234\" height=\"213\" srcset=\"https:\/\/ebooks.inflibnet.ac.in\/csp06\/wp-content\/uploads\/sites\/52\/2018\/07\/1-237.png 234w, https:\/\/ebooks.inflibnet.ac.in\/csp06\/wp-content\/uploads\/sites\/52\/2018\/07\/1-237-65x59.png 65w, https:\/\/ebooks.inflibnet.ac.in\/csp06\/wp-content\/uploads\/sites\/52\/2018\/07\/1-237-225x205.png 225w\" sizes=\"auto, (max-width: 234px) 100vw, 234px\" \/><\/p>\n<p>&nbsp;<\/p>\n<p>The chromaticity diagram is useful for the following:<\/p>\n<ul>\n<li>Comparing color gamut\u2019s for different sets of primaries<\/li>\n<li>Identifying complementary colors<\/li>\n<li>Determining dominant wavelength<\/li>\n<li>Determining the purity of a given color<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<p>The three figures in a row below help us understand the concepts better:<\/p>\n<p>&nbsp;<\/p>\n<p style=\"text-align: justify\">Refer to Figure 1 below: Color gamut\u2019s 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.\u00a0<span style=\"font-size: 1em;text-align: initial\">Refer to figure 2 below: Any straight line passing through white will have complementary colors on either sides of white.<\/span><\/p>\n<\/div>\n<div>\n<p style=\"text-align: justify\">A straight line joining any boundary point and White will determine the <em>dominant wavelength<\/em> for any point along that line and it is nothing but the boundary color.<\/p>\n<p>&nbsp;<\/p>\n<p style=\"text-align: justify\">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. <em>Purity<\/em> or <em>Saturation<\/em> is determined by the distance of color from the boundary.<\/p>\n<p>&nbsp;<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-335 aligncenter\" src=\"http:\/\/csp06.epgpbooks.inflibnet.ac.in\/wp-content\/uploads\/sites\/52\/2018\/07\/1-238.png\" alt=\"\" width=\"413\" height=\"185\" srcset=\"https:\/\/ebooks.inflibnet.ac.in\/csp06\/wp-content\/uploads\/sites\/52\/2018\/07\/1-238.png 413w, https:\/\/ebooks.inflibnet.ac.in\/csp06\/wp-content\/uploads\/sites\/52\/2018\/07\/1-238-300x134.png 300w, https:\/\/ebooks.inflibnet.ac.in\/csp06\/wp-content\/uploads\/sites\/52\/2018\/07\/1-238-65x29.png 65w, https:\/\/ebooks.inflibnet.ac.in\/csp06\/wp-content\/uploads\/sites\/52\/2018\/07\/1-238-225x101.png 225w, https:\/\/ebooks.inflibnet.ac.in\/csp06\/wp-content\/uploads\/sites\/52\/2018\/07\/1-238-350x157.png 350w\" sizes=\"auto, (max-width: 413px) 100vw, 413px\" \/><\/p>\n<p>&nbsp;<\/p>\n<p>Let\u2019s discuss about the popular practical color models in use.<\/p>\n<p>&nbsp;<\/p>\n<p><strong>RGB Color Model:<\/strong><\/p>\n<p>&nbsp;<\/p>\n<p style=\"text-align: justify\">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.<\/p>\n<p>&nbsp;<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-336 aligncenter\" src=\"http:\/\/csp06.epgpbooks.inflibnet.ac.in\/wp-content\/uploads\/sites\/52\/2018\/07\/1-239.png\" alt=\"\" width=\"570\" height=\"221\" srcset=\"https:\/\/ebooks.inflibnet.ac.in\/csp06\/wp-content\/uploads\/sites\/52\/2018\/07\/1-239.png 570w, https:\/\/ebooks.inflibnet.ac.in\/csp06\/wp-content\/uploads\/sites\/52\/2018\/07\/1-239-300x116.png 300w, https:\/\/ebooks.inflibnet.ac.in\/csp06\/wp-content\/uploads\/sites\/52\/2018\/07\/1-239-65x25.png 65w, https:\/\/ebooks.inflibnet.ac.in\/csp06\/wp-content\/uploads\/sites\/52\/2018\/07\/1-239-225x87.png 225w, https:\/\/ebooks.inflibnet.ac.in\/csp06\/wp-content\/uploads\/sites\/52\/2018\/07\/1-239-350x136.png 350w\" sizes=\"auto, (max-width: 570px) 100vw, 570px\" \/><\/p>\n<p>&nbsp;<\/p>\n<p>The\u00a0 figure\u00a0 below\u00a0 demonstrates \u00a0the RGB\u00a0 color\u00a0 gamut\u00a0 for\u00a0 NTSC chromaticity\u00a0 coordinates.<\/p>\n<p>Illuminant C is at position (0.310, 0.316), with a luminance value of Y = 100.0.<\/p>\n<\/div>\n<div>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-337 aligncenter\" src=\"http:\/\/csp06.epgpbooks.inflibnet.ac.in\/wp-content\/uploads\/sites\/52\/2018\/07\/1-240.png\" alt=\"\" width=\"361\" height=\"187\" srcset=\"https:\/\/ebooks.inflibnet.ac.in\/csp06\/wp-content\/uploads\/sites\/52\/2018\/07\/1-240.png 361w, https:\/\/ebooks.inflibnet.ac.in\/csp06\/wp-content\/uploads\/sites\/52\/2018\/07\/1-240-300x155.png 300w, https:\/\/ebooks.inflibnet.ac.in\/csp06\/wp-content\/uploads\/sites\/52\/2018\/07\/1-240-65x34.png 65w, https:\/\/ebooks.inflibnet.ac.in\/csp06\/wp-content\/uploads\/sites\/52\/2018\/07\/1-240-225x117.png 225w, https:\/\/ebooks.inflibnet.ac.in\/csp06\/wp-content\/uploads\/sites\/52\/2018\/07\/1-240-350x181.png 350w\" sizes=\"auto, (max-width: 361px) 100vw, 361px\" \/><\/p>\n<\/div>\n<p>&nbsp;<\/p>\n<div>\n<p style=\"text-align: justify\">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 <em>additive color mixing<\/em> 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 <em>component<\/em> color model, since, each of the R, G, B signals are to be sent along three different cables.<\/p>\n<p>&nbsp;<\/p>\n<p><strong>CMY Color Model:<\/strong><\/p>\n<p>&nbsp;<\/p>\n<p style=\"text-align: justify\">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.<\/p>\n<p>&nbsp;<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-338 aligncenter\" src=\"http:\/\/csp06.epgpbooks.inflibnet.ac.in\/wp-content\/uploads\/sites\/52\/2018\/07\/1-241.png\" alt=\"\" width=\"438\" height=\"184\" srcset=\"https:\/\/ebooks.inflibnet.ac.in\/csp06\/wp-content\/uploads\/sites\/52\/2018\/07\/1-241.png 438w, https:\/\/ebooks.inflibnet.ac.in\/csp06\/wp-content\/uploads\/sites\/52\/2018\/07\/1-241-300x126.png 300w, https:\/\/ebooks.inflibnet.ac.in\/csp06\/wp-content\/uploads\/sites\/52\/2018\/07\/1-241-65x27.png 65w, https:\/\/ebooks.inflibnet.ac.in\/csp06\/wp-content\/uploads\/sites\/52\/2018\/07\/1-241-225x95.png 225w, https:\/\/ebooks.inflibnet.ac.in\/csp06\/wp-content\/uploads\/sites\/52\/2018\/07\/1-241-350x147.png 350w\" sizes=\"auto, (max-width: 438px) 100vw, 438px\" \/><\/p>\n<p>&nbsp;<\/p>\n<p style=\"text-align: justify\">Actually the C, M, Y are called <em>secondary colors<\/em> as they can be produced by combination of <em>primary colors<\/em> 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 \u2018<em>K<\/em>\u2019 to make it CMYK color model. This color model produces a wide range of colors, using <em>subtractive color mixing<\/em> 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\u00a0<span style=\"font-size: 1em;text-align: initial\">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.<\/span><\/p>\n<\/div>\n<div>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-339 aligncenter\" src=\"http:\/\/csp06.epgpbooks.inflibnet.ac.in\/wp-content\/uploads\/sites\/52\/2018\/07\/1-242.png\" alt=\"\" width=\"296\" height=\"253\" srcset=\"https:\/\/ebooks.inflibnet.ac.in\/csp06\/wp-content\/uploads\/sites\/52\/2018\/07\/1-242.png 296w, https:\/\/ebooks.inflibnet.ac.in\/csp06\/wp-content\/uploads\/sites\/52\/2018\/07\/1-242-65x56.png 65w, https:\/\/ebooks.inflibnet.ac.in\/csp06\/wp-content\/uploads\/sites\/52\/2018\/07\/1-242-225x192.png 225w\" sizes=\"auto, (max-width: 296px) 100vw, 296px\" \/><\/p>\n<p>&nbsp;<\/p>\n<p style=\"text-align: justify\">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 <em>out<\/em>&#8211;<em>of<\/em>&#8211;<em>gamut<\/em> colors for the CMY color model.<\/p>\n<p>&nbsp;<\/p>\n<p><strong>YUV \/ YIQ \/ YC<\/strong><strong>b<\/strong><strong>C<\/strong><strong>r<\/strong><strong> color model:<\/strong><\/p>\n<p>&nbsp;<\/p>\n<p style=\"text-align: justify\">This is a practical color model, with <strong><em>Y<\/em><\/strong> as the luminance parameter, <strong><em>I<\/em>,<em>Q<\/em><\/strong> representing the c<em>hroma<\/em> parameters. A combination of RGB intensities are chosen for <strong><em>Y<\/em><\/strong> for the luminosity curve. Parameter <strong><em>I<\/em><\/strong> contains orange-cyan hue and <strong><em>Q<\/em><\/strong> 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 <em>composite<\/em> 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.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-340 aligncenter\" src=\"http:\/\/csp06.epgpbooks.inflibnet.ac.in\/wp-content\/uploads\/sites\/52\/2018\/07\/1-243.png\" alt=\"\" width=\"493\" height=\"71\" srcset=\"https:\/\/ebooks.inflibnet.ac.in\/csp06\/wp-content\/uploads\/sites\/52\/2018\/07\/1-243.png 493w, https:\/\/ebooks.inflibnet.ac.in\/csp06\/wp-content\/uploads\/sites\/52\/2018\/07\/1-243-300x43.png 300w, https:\/\/ebooks.inflibnet.ac.in\/csp06\/wp-content\/uploads\/sites\/52\/2018\/07\/1-243-65x9.png 65w, https:\/\/ebooks.inflibnet.ac.in\/csp06\/wp-content\/uploads\/sites\/52\/2018\/07\/1-243-225x32.png 225w, https:\/\/ebooks.inflibnet.ac.in\/csp06\/wp-content\/uploads\/sites\/52\/2018\/07\/1-243-350x50.png 350w\" sizes=\"auto, (max-width: 493px) 100vw, 493px\" \/><\/p>\n<p>&nbsp;<\/p>\n<p style=\"text-align: justify\">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 <strong>Y<\/strong> value is assigned. The bandwidth occupied by the two <em>chroma<\/em> parameters together (<em>U<\/em>+<em>V<\/em>), is exactly half of that of the <em>luma<\/em> 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.<\/p>\n<p>&nbsp;<\/p>\n<p><strong>HSV Color model:<\/strong><\/p>\n<p>&nbsp;<\/p>\n<p style=\"text-align: justify\"><strong>H <\/strong>stands for Hue, and is measured as an angle in the interval [0, 360\u00b0].<strong> S <\/strong>stands for Saturation and is measured as a value in the interval [0,1]. <strong>V<\/strong> stands for Value, and is measured\u00a0<span style=\"text-align: initial;font-size: 1em\">in the interval [0,1]. The color gamut for this color model is represented in the shape of a <\/span><em style=\"text-align: initial;font-size: 1em\">Hexcone<\/em><span style=\"text-align: initial;font-size: 1em\">, short form of<\/span><em style=\"text-align: initial;font-size: 1em\"> Hexagonal Cone <\/em><span style=\"text-align: initial;font-size: 1em\">as shown.<\/span><\/p>\n<\/div>\n<div>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-341 aligncenter\" src=\"http:\/\/csp06.epgpbooks.inflibnet.ac.in\/wp-content\/uploads\/sites\/52\/2018\/07\/1-244.png\" alt=\"\" width=\"287\" height=\"249\" srcset=\"https:\/\/ebooks.inflibnet.ac.in\/csp06\/wp-content\/uploads\/sites\/52\/2018\/07\/1-244.png 287w, https:\/\/ebooks.inflibnet.ac.in\/csp06\/wp-content\/uploads\/sites\/52\/2018\/07\/1-244-65x56.png 65w, https:\/\/ebooks.inflibnet.ac.in\/csp06\/wp-content\/uploads\/sites\/52\/2018\/07\/1-244-225x195.png 225w\" sizes=\"auto, (max-width: 287px) 100vw, 287px\" \/><\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>The following points are observed from the figure above,<\/p>\n<ul>\n<li>H = angle measured around the Hexcone<\/li>\n<li>V = the Value axis, that starts at the vertex of the Hexcone and goes vertically\u00a0 upwards<\/li>\n<li>S = 0, at the centre along the V-axis<\/li>\n<li>S=1, on the outer boundary of the Hexcone<\/li>\n<li>V=0 at the bottom of Hexcone<\/li>\n<li>V=1 on the top plane of the Hexcone<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-342 aligncenter\" src=\"http:\/\/csp06.epgpbooks.inflibnet.ac.in\/wp-content\/uploads\/sites\/52\/2018\/07\/1-245.png\" alt=\"\" width=\"412\" height=\"222\" srcset=\"https:\/\/ebooks.inflibnet.ac.in\/csp06\/wp-content\/uploads\/sites\/52\/2018\/07\/1-245.png 412w, https:\/\/ebooks.inflibnet.ac.in\/csp06\/wp-content\/uploads\/sites\/52\/2018\/07\/1-245-300x162.png 300w, https:\/\/ebooks.inflibnet.ac.in\/csp06\/wp-content\/uploads\/sites\/52\/2018\/07\/1-245-65x35.png 65w, https:\/\/ebooks.inflibnet.ac.in\/csp06\/wp-content\/uploads\/sites\/52\/2018\/07\/1-245-225x121.png 225w, https:\/\/ebooks.inflibnet.ac.in\/csp06\/wp-content\/uploads\/sites\/52\/2018\/07\/1-245-350x189.png 350w\" sizes=\"auto, (max-width: 412px) 100vw, 412px\" \/><\/p>\n<p style=\"text-align: justify\">Any color in this color model is identified with three values H, S and V. At every 60\u00b0, starting with Red at 0\u00b0 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\u00b0 degrees apart.<\/p>\n<ul>\n<li>Adding black pigment to a color produces <em>shade<\/em> of that color<\/li>\n<li>Adding white pigment to a color produces <em>tint<\/em> of that color<\/li>\n<li>Adding both black and white pigments produces <em>tone<\/em> of that color<\/li>\n<\/ul>\n<\/div>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-343 aligncenter\" src=\"http:\/\/csp06.epgpbooks.inflibnet.ac.in\/wp-content\/uploads\/sites\/52\/2018\/07\/1-246.png\" alt=\"\" width=\"381\" height=\"115\" srcset=\"https:\/\/ebooks.inflibnet.ac.in\/csp06\/wp-content\/uploads\/sites\/52\/2018\/07\/1-246.png 381w, https:\/\/ebooks.inflibnet.ac.in\/csp06\/wp-content\/uploads\/sites\/52\/2018\/07\/1-246-300x91.png 300w, https:\/\/ebooks.inflibnet.ac.in\/csp06\/wp-content\/uploads\/sites\/52\/2018\/07\/1-246-65x20.png 65w, https:\/\/ebooks.inflibnet.ac.in\/csp06\/wp-content\/uploads\/sites\/52\/2018\/07\/1-246-225x68.png 225w, https:\/\/ebooks.inflibnet.ac.in\/csp06\/wp-content\/uploads\/sites\/52\/2018\/07\/1-246-350x106.png 350w\" sizes=\"auto, (max-width: 381px) 100vw, 381px\" \/><\/p>\n<div>\n<p>&nbsp;<\/p>\n<p style=\"text-align: justify\">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\u00b0, S=1, V=0 to 1. The <em>pure<\/em> colors occupy the top plane and are on the boundary of the Hexcone. The central vertical line connecting the Black and White is the <em>Gray<\/em> Line. The <em>Shades<\/em> occupy the outer boundary of the Hexcone from top the bottom. The <em>Tints<\/em> 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 <em>Tones<\/em>. 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.<\/p>\n<p>&nbsp;<\/p>\n<p><strong>Conversion between RGB and HSV:<\/strong><\/p>\n<p>&nbsp;<\/p>\n<p style=\"text-align: justify\">Let\u2019s 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.<\/p>\n<\/div>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-344 aligncenter\" src=\"http:\/\/csp06.epgpbooks.inflibnet.ac.in\/wp-content\/uploads\/sites\/52\/2018\/07\/1-247.png\" alt=\"\" width=\"383\" height=\"179\" srcset=\"https:\/\/ebooks.inflibnet.ac.in\/csp06\/wp-content\/uploads\/sites\/52\/2018\/07\/1-247.png 383w, https:\/\/ebooks.inflibnet.ac.in\/csp06\/wp-content\/uploads\/sites\/52\/2018\/07\/1-247-300x140.png 300w, https:\/\/ebooks.inflibnet.ac.in\/csp06\/wp-content\/uploads\/sites\/52\/2018\/07\/1-247-65x30.png 65w, https:\/\/ebooks.inflibnet.ac.in\/csp06\/wp-content\/uploads\/sites\/52\/2018\/07\/1-247-225x105.png 225w, https:\/\/ebooks.inflibnet.ac.in\/csp06\/wp-content\/uploads\/sites\/52\/2018\/07\/1-247-350x164.png 350w\" sizes=\"auto, (max-width: 383px) 100vw, 383px\" \/><\/p>\n<div>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-345 aligncenter\" src=\"http:\/\/csp06.epgpbooks.inflibnet.ac.in\/wp-content\/uploads\/sites\/52\/2018\/07\/1-248.png\" alt=\"\" width=\"461\" height=\"242\" srcset=\"https:\/\/ebooks.inflibnet.ac.in\/csp06\/wp-content\/uploads\/sites\/52\/2018\/07\/1-248.png 461w, https:\/\/ebooks.inflibnet.ac.in\/csp06\/wp-content\/uploads\/sites\/52\/2018\/07\/1-248-300x157.png 300w, https:\/\/ebooks.inflibnet.ac.in\/csp06\/wp-content\/uploads\/sites\/52\/2018\/07\/1-248-65x34.png 65w, https:\/\/ebooks.inflibnet.ac.in\/csp06\/wp-content\/uploads\/sites\/52\/2018\/07\/1-248-225x118.png 225w, https:\/\/ebooks.inflibnet.ac.in\/csp06\/wp-content\/uploads\/sites\/52\/2018\/07\/1-248-350x184.png 350w\" sizes=\"auto, (max-width: 461px) 100vw, 461px\" \/><\/p>\n<p>&nbsp;<\/p>\n<p style=\"text-align: center\">R, G, B values are from 0 to 1, while H = [0,360], S = [0,1], V = [0,1]<\/p>\n<p>&nbsp;<\/p>\n<p><strong><em>RGB TO HSV:<\/em><\/strong><\/p>\n<ul>\n<li>For any set of RGB values, V is equal to the maximum value in the set.<\/li>\n<li>The HSV point corresponding to the set of RGB values lies on the hexagonal cross section at value V.<\/li>\n<li>Parameter S is determined as the relative distance of this point from the V axis.<\/li>\n<li style=\"text-align: justify\">Parameter H is determined by calculating the relative position of the point within each sextant of the hexagon.<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<p><strong>Algorithm to convert from RGB to HSV:<\/strong><\/p>\n<\/div>\n<table style=\"border-collapse: collapse;width: 100%\">\n<tbody>\n<tr>\n<td style=\"width: 100%\">\n<div>\n<p>\/Input: r,g,b values are from 0 to 1<\/p>\n<p>\/\/Output: h = [0,360], s = [0,1], v = [0,1]<\/p>\n<p>\/\/if s == 0, then h = -1 (undefined)<\/p>\n<p>void RGBtoHSV( float r, float g, float b, float h, float s, float v)<\/p>\n<p>{<\/p>\n<\/div>\n<div>\n<p>\u00a0 float min, max, delta;<\/p>\n<p>min = MIN( r, g, b );<\/p>\n<p>max = MAX( r, g, b );<\/p>\n<p>v = max;<\/p>\n<p>delta = max &#8211; min;<\/p>\n<p>if( max != 0 )<\/p>\n<p>\/\/ V is set as the maximum of R,G,B<\/p>\n<p><span style=\"text-align: initial;font-size: 1em\">s = delta \/ max; \/\/ s is set here as the ratio of <\/span><em style=\"text-align: initial;font-size: 1em\">delta<\/em><span style=\"text-align: initial;font-size: 1em\"> and <\/span><em style=\"text-align: initial;font-size: 1em\">max<\/em><span style=\"text-align: initial;font-size: 1em\"> of RGB<\/span><\/p>\n<p><span style=\"text-align: initial;font-size: 1em\">else {<\/span><\/p>\n<p><span style=\"text-align: initial;font-size: 1em\">s = 0;<\/span><\/p>\n<p><span style=\"text-align: initial;font-size: 1em\">h = -1;<\/span><\/p>\n<p><span style=\"text-align: initial;font-size: 1em\">return;<\/span><\/p>\n<p><span style=\"text-align: initial;font-size: 1em\">}<\/span><\/p>\n<p><span style=\"text-align: initial;font-size: 1em\">if( r == max )<\/span><\/p>\n<p><span style=\"font-size: 1em;text-align: initial\">h = ( g &#8211; b ) \/ delta;<\/span><\/p>\n<p><span style=\"text-align: initial;font-size: 1em\">\/\/ between yellow &amp; magenta<\/span><\/p>\n<p><span style=\"font-size: 1em;text-align: initial\">else if( g == max )<\/span><\/p>\n<p><span style=\"font-size: 1em;text-align: initial\">h = 2 + ( b &#8211; r ) \/ delta;<\/span><\/p>\n<p><span style=\"text-align: initial;font-size: 1em\">\/\/ between cyan &amp; yellow<\/span><\/p>\n<p><span style=\"font-size: 1em;text-align: initial\">else<\/span><\/p>\n<p><span style=\"font-size: 1em;text-align: initial\">h *= 60;<\/span><\/p>\n<p><span style=\"text-align: initial;font-size: 1em\">if( h &lt; 0 )<\/span><\/p>\n<p><span style=\"text-align: initial;font-size: 1em\">h = 4 + ( r &#8211; g ) \/ delta;<\/span><\/p>\n<p><span style=\"text-align: initial;font-size: 1em\">\/\/ between magenta &amp; cyan<\/span><\/p>\n<p><span style=\"text-align: initial;font-size: 1em\">\/\/ degrees<\/span><\/p>\n<p><span style=\"font-size: 1em;text-align: initial\">h += 360;<\/span><\/p>\n<p><span style=\"font-size: 1em;text-align: initial\">}\/<\/span><\/p>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<div>\n<p style=\"text-align: justify\">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\u00b0], 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\u00b0 from Red, and for Blue we shall be adding 4 sextants, since it is at 240\u00b0 from Red.<\/p>\n<p>&nbsp;<\/p>\n<p><strong>Algorithm to convert from HSV to RGB:<\/strong><\/p>\n<\/div>\n<table style=\"border-collapse: collapse;width: 100%\">\n<tbody>\n<tr>\n<td style=\"width: 100%\">\n<div>\n<p>void HSVtoRGB( float r, float g, float b, float h, float s, float v )<\/p>\n<p>{<\/p>\n<p>int i;<\/p>\n<p>float a, b, c, f;<\/p>\n<p>if( s == 0 ) {<\/p>\n<p>R= G = B = v;<\/p>\n<p>return;<\/p>\n<p>}<\/p>\n<p><span style=\"font-size: 1em;text-align: initial\">else {<\/span><\/p>\n<p><span style=\"text-align: initial;font-size: 1em\">if (h==1.0)<\/span><\/p>\n<p><span style=\"text-align: initial;font-size: 1em\">h*=6.0;<\/span><\/p>\n<p><span style=\"text-align: initial;font-size: 1em\">h=0;<\/span><\/p>\n<p><span style=\"font-size: 1em;text-align: initial\">i = floor( h );<\/span><\/p>\n<p><span style=\"text-align: initial;font-size: 1em\">f = h &#8211; i;<\/span><\/p>\n<p><span style=\"text-align: initial;font-size: 1em\">a= v * ( 1 &#8211; s );<\/span><\/p>\n<p><span style=\"text-align: initial;font-size: 1em\">b = v * ( 1 \u2013 (s * f) );<\/span><\/p>\n<p><span style=\"text-align: initial;font-size: 1em\">c= v * ( 1 \u2013 (s * ( 1 &#8211; f )) );<\/span><\/p>\n<p><span style=\"text-align: initial;font-size: 1em\">switch( i ) {<\/span><\/p>\n<p><span style=\"text-align: initial;font-size: 1em\">case 0:<\/span><\/p>\n<p><span style=\"font-size: 1em;text-align: initial\">R = v;\u00a0<\/span><span style=\"text-align: initial;font-size: 1em\">G= c;\u00a0<\/span><span style=\"text-align: initial;font-size: 1em\">B = a;<\/span><\/p>\n<p><span style=\"text-align: initial;font-size: 1em\">break;<\/span><\/p>\n<p><span style=\"font-size: 1em;text-align: initial\">case 1:<\/span><\/p>\n<p><span style=\"font-size: 1em;text-align: initial\">R = b;\u00a0<\/span><span style=\"text-align: initial;font-size: 1em\">G = v;\u00a0<\/span><span style=\"text-align: initial;font-size: 1em\">B = a;<\/span><\/p>\n<p><span style=\"text-align: initial;font-size: 1em\">break;<\/span><\/p>\n<p><span style=\"font-size: 1em;text-align: initial\">case 2:<\/span><\/p>\n<p><span style=\"font-size: 1em;text-align: initial\">R = a;\u00a0<\/span><span style=\"text-align: initial;font-size: 1em\">G = v;\u00a0<\/span><span style=\"text-align: initial;font-size: 1em\">B = c;<\/span><\/p>\n<p><span style=\"text-align: initial;font-size: 1em\">break;<\/span><\/p>\n<p><span style=\"font-size: 1em;text-align: initial\">case 3:<\/span><\/p>\n<p><span style=\"font-size: 1em;text-align: initial\">R = a;\u00a0<\/span><span style=\"text-align: initial;font-size: 1em\">G = b;\u00a0<\/span><span style=\"text-align: initial;font-size: 1em\">B = v;<\/span><\/p>\n<p><span style=\"text-align: initial;font-size: 1em\">break;<\/span><\/p>\n<p><span style=\"font-size: 1em;text-align: initial\">case 4:<\/span><\/p>\n<p><span style=\"text-align: initial;font-size: 1em\">R = c;\u00a0<\/span><span style=\"text-align: initial;font-size: 1em\">G = a;\u00a0<\/span><span style=\"text-align: initial;font-size: 1em\">B = v;<\/span><\/p>\n<p><span style=\"text-align: initial;font-size: 1em\">break;<\/span><\/p>\n<p><span style=\"font-size: 1em;text-align: initial\">default:<\/span><\/p>\n<p><span style=\"font-size: 1em;text-align: initial\">R = v;\u00a0<\/span><span style=\"text-align: initial;font-size: 1em\">G = a;\u00a0<\/span><span style=\"text-align: initial;font-size: 1em\">B = b;<\/span><\/p>\n<p><span style=\"text-align: initial;font-size: 1em\">break;<\/span><\/p>\n<\/div>\n<div>\n<p>\u00a0 \u00a0 }<\/p>\n<p>}<\/p>\n<p>}<\/p>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<div><span style=\"text-align: justify;font-size: 1em\">In the algorithm given above, the input are the values of H,S, V in the range [0,1] and output are the values of R, G, B in the range [0,1]. The computations are done again for each sextant of the Hexcone.<\/span><\/div>\n<div>\n<p>&nbsp;<\/p>\n<p><strong>HLS Color Model:<\/strong><\/p>\n<p>&nbsp;<\/p>\n<p style=\"text-align: justify\">This is an extension of the HSV color model and is represented by a D<em>ouble Hexcone<\/em>. 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, <em>pure colors<\/em> lie on the plane at L=0.5, Black at L=0, White at L=1.0. <em>Shades<\/em> lie on the outer surface of the bottom half of Double Hexcone. <em>Tints<\/em> lie on the surface of the upper half of the Double Hexcone. <em>Tones<\/em> occupy the entire inside of the volume of the shape. The central line formed by the L-axis is the <em>Gray<\/em> Line.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-346 aligncenter\" src=\"http:\/\/csp06.epgpbooks.inflibnet.ac.in\/wp-content\/uploads\/sites\/52\/2018\/07\/1-249.png\" alt=\"\" width=\"254\" height=\"326\" srcset=\"https:\/\/ebooks.inflibnet.ac.in\/csp06\/wp-content\/uploads\/sites\/52\/2018\/07\/1-249.png 254w, https:\/\/ebooks.inflibnet.ac.in\/csp06\/wp-content\/uploads\/sites\/52\/2018\/07\/1-249-234x300.png 234w, https:\/\/ebooks.inflibnet.ac.in\/csp06\/wp-content\/uploads\/sites\/52\/2018\/07\/1-249-65x83.png 65w, https:\/\/ebooks.inflibnet.ac.in\/csp06\/wp-content\/uploads\/sites\/52\/2018\/07\/1-249-225x289.png 225w\" sizes=\"auto, (max-width: 254px) 100vw, 254px\" \/><\/p>\n<p>&nbsp;<\/p>\n<p>H = angle measured around the Hexcone [0,360\u00b0]<\/p>\n<p>S = 0, along the L-axis<\/p>\n<p>S=1, on the outer boundary of the double hexcone<\/p>\n<p>L=0 at the bottom of double hexcone<\/p>\n<p>L=1 on the top vertex of the double hexcone<\/p>\n<p>&nbsp;<\/p>\n<p>The table below shows the values of H, S, L for various colors.<\/p>\n<p>&nbsp;<\/p>\n<table class=\"aligncenter\">\n<tbody>\n<tr>\n<td><\/td>\n<td><strong>Hue (H)<\/strong><\/td>\n<td><strong>Saturation (S)<\/strong><\/td>\n<td><strong>Value (V)<\/strong><\/td>\n<\/tr>\n<tr>\n<td><strong>Pure<\/strong><\/td>\n<td>0\u00b0 to 360\u00b0<\/td>\n<td>S=1<\/td>\n<td>V=0.5<\/td>\n<\/tr>\n<tr>\n<td><strong>Gray<\/strong><\/td>\n<td>0\u00b0 to 360\u00b0<\/td>\n<td>S=0<\/td>\n<td>V=0 to 1<\/td>\n<\/tr>\n<tr>\n<td><strong>Shades<\/strong><\/td>\n<td>0\u00b0 to 360\u00b0<\/td>\n<td>S=1<\/td>\n<td>V=0 to 0.5<\/td>\n<\/tr>\n<tr>\n<td><strong>Tints<\/strong><\/td>\n<td>0\u00b0 to 360\u00b0<\/td>\n<td>S=1<\/td>\n<td>V=0.5 to 1<\/td>\n<\/tr>\n<tr>\n<td><strong>Tones<\/strong><\/td>\n<td>0\u00b0 to 360\u00b0<\/td>\n<td>S=0 to 1<\/td>\n<td>V=0 to 1<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>&nbsp;<\/p>\n<p><strong>Summary:<\/strong><\/p>\n<ul>\n<li>Learnt color theory (definitions and imaginary color model).<\/li>\n<li><span style=\"text-align: initial;font-size: 1em\">Thoroughly examined Practical color models (RGB, CMY, YIQ, HSV, HLS)<\/span><\/li>\n<\/ul>\n<\/div>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-347 aligncenter\" src=\"http:\/\/csp06.epgpbooks.inflibnet.ac.in\/wp-content\/uploads\/sites\/52\/2018\/07\/1-250.png\" alt=\"\" width=\"641\" height=\"308\" srcset=\"https:\/\/ebooks.inflibnet.ac.in\/csp06\/wp-content\/uploads\/sites\/52\/2018\/07\/1-250.png 641w, https:\/\/ebooks.inflibnet.ac.in\/csp06\/wp-content\/uploads\/sites\/52\/2018\/07\/1-250-300x144.png 300w, https:\/\/ebooks.inflibnet.ac.in\/csp06\/wp-content\/uploads\/sites\/52\/2018\/07\/1-250-65x31.png 65w, https:\/\/ebooks.inflibnet.ac.in\/csp06\/wp-content\/uploads\/sites\/52\/2018\/07\/1-250-225x108.png 225w, https:\/\/ebooks.inflibnet.ac.in\/csp06\/wp-content\/uploads\/sites\/52\/2018\/07\/1-250-350x168.png 350w\" sizes=\"auto, (max-width: 641px) 100vw, 641px\" \/><\/p>\n","protected":false},"author":3,"menu_order":18,"template":"","meta":{"pb_show_title":"on","pb_short_title":"","pb_subtitle":"","pb_authors":["dr-t-raghuveera"],"pb_section_license":""},"chapter-type":[],"contributor":[59],"license":[],"class_list":["post-326","chapter","type-chapter","status-publish","hentry","contributor-dr-t-raghuveera"],"part":3,"_links":{"self":[{"href":"https:\/\/ebooks.inflibnet.ac.in\/csp06\/wp-json\/pressbooks\/v2\/chapters\/326","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ebooks.inflibnet.ac.in\/csp06\/wp-json\/pressbooks\/v2\/chapters"}],"about":[{"href":"https:\/\/ebooks.inflibnet.ac.in\/csp06\/wp-json\/wp\/v2\/types\/chapter"}],"author":[{"embeddable":true,"href":"https:\/\/ebooks.inflibnet.ac.in\/csp06\/wp-json\/wp\/v2\/users\/3"}],"version-history":[{"count":4,"href":"https:\/\/ebooks.inflibnet.ac.in\/csp06\/wp-json\/pressbooks\/v2\/chapters\/326\/revisions"}],"predecessor-version":[{"id":569,"href":"https:\/\/ebooks.inflibnet.ac.in\/csp06\/wp-json\/pressbooks\/v2\/chapters\/326\/revisions\/569"}],"part":[{"href":"https:\/\/ebooks.inflibnet.ac.in\/csp06\/wp-json\/pressbooks\/v2\/parts\/3"}],"metadata":[{"href":"https:\/\/ebooks.inflibnet.ac.in\/csp06\/wp-json\/pressbooks\/v2\/chapters\/326\/metadata\/"}],"wp:attachment":[{"href":"https:\/\/ebooks.inflibnet.ac.in\/csp06\/wp-json\/wp\/v2\/media?parent=326"}],"wp:term":[{"taxonomy":"chapter-type","embeddable":true,"href":"https:\/\/ebooks.inflibnet.ac.in\/csp06\/wp-json\/pressbooks\/v2\/chapter-type?post=326"},{"taxonomy":"contributor","embeddable":true,"href":"https:\/\/ebooks.inflibnet.ac.in\/csp06\/wp-json\/wp\/v2\/contributor?post=326"},{"taxonomy":"license","embeddable":true,"href":"https:\/\/ebooks.inflibnet.ac.in\/csp06\/wp-json\/wp\/v2\/license?post=326"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}