Editing HSL and HSV (section)

==Formal derivation==

[[File:Hsl-and-hsv.svg|thumb|right|300px|Fig. 8. The geometric derivation of the cylindrical HSL and HSV representations of an RGB "colorcube".|alt=A flow-chart–like diagram shows the derivation of HSL, HSV, and a luma/chroma/hue model. At the top lies an RGB "color cube", which as a first step is tilted onto its corner so that black lies at the bottom and white at the top. At the next step, the three models diverge, and the height of red, yellow, green, cyan, blue, and magenta is set based on the formula for lightness, value, or luma: in HSV, all six of these are placed in the plane with white, making an upside-down hexagonal pyramid; in HSL, all six are placed in a plane halfway between white and black, making a bipyramid; in the luma/chroma/hue model, the height is determined by the approximate formula luma equals 0.3 times red plus 0.6 times green plus 0.1 times blue. At the next step, each horizontal slice of HSL and HSV is expanded to fill a uniform-width hexagonal prism, while the luma/chroma/hue model is simply embedded in that prism without modification. As a final step, all three models' hexagonal prisms are warped into cylinders, reflecting the nature of the definition of hue and saturation or chroma. For full details and mathematical formalism, read the rest of this section.]]
{{multiple image
 | width = 150
 | image1 = RGB_2_HSV_conversion_with_grid.ogg
 | alt1 = The video shows a continuous transformation from an RGB cube set at its black vertex to a HSV cylinder through a step of HSV cone
 | image2 = RGB_2_HSL_conversion_with_grid.ogg
 | alt2 = The video shows a continuous transformation from an RGB cube set at its black vertex to a HSL cylinder through a step of HSL double cone
 | footer = Videos demonstrating the above geometric derivation for HSV (left) and HSL (right) as continuous deformations of the RGB cube
}}

===Color-making attributes===
{{see also|Color vision}}
The dimensions of the HSL and HSV geometries – simple transformations of the not-perceptually-based RGB model – are not directly related to the [[photometry (optics)|photometric]] color-making attributes of the same names, as defined by scientists such as the [[International Commission on Illumination|CIE]] or [[ASTM International|ASTM]]. Nonetheless, it is worth reviewing those definitions before leaping into the derivation of our models.{{refn|group=upper-alpha |"Clearly, if color appearance is to be described in a systematic, mathematical way, definitions of the phenomena being described need to be precise and universally agreed upon."<ref name=Fairchild-term>[[#Fairchild|Fairchild (2005)]], [https://books.google.com/books?id=8_TxzK2B-5MC&pg=PT106 {{nobr|pp. 83–93}}]</ref>}} For the definitions of color-making attributes which follow, see:<ref name=Fairchild-term/><ref name=Kuehni>[[#Kuehni|Kuehni (2003)]]</ref><ref>{{cite book |publisher=[[ASTM International|ASTM]] |date=2009 |url=http://www.astm.org/Standards/E284.htm |title=Standard Terminology of Appearance E284}}</ref><ref>{{cite book |publisher=[[International Commission on Illumination|CIE]] and [[International Electrotechnical Commission|IEC]] |date=1987 |url=http://www.cie.co.at/publ/abst/17-4-89.html |title=International Lighting Vocabulary |edition=4th |isbn=978-3-900734-07-7 |access-date=2010-02-05 |archive-url=https://web.archive.org/web/20100227034508/http://www.cie.co.at/publ/abst/17-4-89.html |archive-date=2010-02-27 |url-status=dead }}</ref><ref name=Poynton>[[#Poynton|Poynton (1997)]]</ref><ref>{{cite book |title=Digital Color Imaging Handbook |last=Sharma |first=G.|year=2003 |publisher=CRC Press |location=Boca Raton, FL |isbn=978-0-8493-0900-7 }}</ref>

; [[Hue]]: The "attribute of a visual sensation according to which an area appears to be similar to one of the [[unique hues|perceived colors]]: red, yellow, green, and blue, or to a combination of two of them".<ref name=Fairchild-term/>
; [[Radiance]] (''L''<sub>e,Ω</sub>): The [[Radiant flux|radiant power]] of light passing through a particular surface per unit [[solid angle]] per unit projected area, measured in [[International System of Units|SI units]] in [[watt]] per [[steradian]] per [[square metre]] ({{nobreak|W·sr<sup>−1</sup>·m<sup>−2</sup>}}).
; [[Luminance]] (''Y'' or ''L''<sub>v,Ω</sub>): The radiance weighted by the effect of each wavelength on a typical human observer, measured in SI units in [[candela per square metre|candela per square meter]] ({{nobreak|cd/m<sup>2</sup>}}). Often the term ''luminance'' is used for the [[relative luminance]], ''Y''/''Y''<sub>''n''</sub>, where ''Y''<sub>''n''</sub> is the luminance of the reference [[white point]].
; [[Luma (video)|Luma]] (''{{prime|Y}}''): The weighted sum of [[gamma correction|gamma-corrected]] {{nobr|''{{prime|R}}''}}, {{nobr|''{{prime|G}}''}}, and {{nobr|''{{prime|B}}''}} values, and used in [[YCbCr|{{nobr|Y{{prime}}CbCr}}]], for [[JPEG]] compression and video transmission.
; [[Brightness|Brightness (or value)]]: The "attribute of a visual sensation according to which an area appears to emit more or less light".<ref name=Fairchild-term/>
; [[Lightness (color)|Lightness]]: The "brightness relative to the brightness of a similarly illuminated white".<ref name=Fairchild-term/>
; [[Colorfulness]]: The "attribute of a visual sensation according to which the perceived color of an area appears to be more or less chromatic".<ref name=Fairchild-term/>
; [[Chrominance|Chroma]]: The "colorfulness relative to the brightness of a similarly illuminated white".<ref name=Fairchild-term/>
; [[Colorfulness#Saturation|Saturation]]: The "colorfulness of a stimulus relative to its own brightness".<ref name=Fairchild-term/>

''Brightness'' and ''colorfulness'' are absolute measures, which usually describe the [[spectral power distribution|spectral distribution]] of light entering the eye, while ''lightness'' and ''chroma'' are measured relative to some white point, and are thus often used for descriptions of surface colors, remaining roughly constant even as brightness and colorfulness change with different [[computer graphics lighting|illumination]]. ''Saturation'' can be defined as either the ratio of colorfulness to brightness, or that of chroma to lightness.

===General approach===
HSL, HSV, and related models can be derived via geometric strategies, or can be thought of as specific instances of a "generalized LHS model". The HSL and HSV model-builders took an RGB cube – with constituent amounts of red, green, and blue light in a color denoted {{nobr|1=''R'', ''G'', ''B'' [[∈]] [[Unit interval|[0, 1]]]}}{{refn|group=upper-alpha |In [[#Levkowitz|Levkowitz and Herman's]] formulation, ''R'', ''G'', and ''B'' stand for the voltages on the guns of a CRT display, which might have different maxima, and so their cartesian [[gamut]] could be a box of any unequal dimensions. Other definitions commonly use integer values in the range {{nobr|[0, 255]}}, storing the value for each component in one [[byte]]. We define the RGB gamut to be a [[unit cube]] for convenience because it simplifies and clarifies the math. Also, in general, HSL and HSV are today computed directly from [[gamma correction|gamma-corrected]] {{nobr|''{{prime|R}}''}}, {{nobr|''{{prime|G}}''}}, and {{nobr|''{{prime|B}}''}} – for instance in [[sRGB]] space – but, when the models were developed, might have been transformations of a linear RGB space. Early authors don't address gamma correction at all, except [[Alvy Ray Smith]]<ref name=Smith>[[#Smith|Smith (1978)]]</ref> who clearly states that "We shall assume that an RGB monitor is a linear device", and thus designed HSV using linear RGB. We will drop the primes, and the labels ''R'', ''G'', and ''B'' should be taken to stand for the three attributes of the origin RGB space, whether or not it is gamma corrected.}} – and tilted it on its corner, so that black rested at the origin with white directly above it along the vertical axis, then measured the hue of the colors in the cube by their angle around that axis, starting with red at 0°. Then they came up with a characterization of brightness/value/lightness, and defined saturation to range from 0 along the axis to 1 at the most colorful point for each pair of other parameters.<ref name=Levkowitz/><ref name=Smith/><ref name=Joblove/>

===Hue and chroma===
{{see also|Hue|Chrominance}}
[[File:HSL-HSV hue and chroma.svg|thumb|right|300px|Fig. 9. Both hue and chroma are defined based on the projection of the RGB cube onto a hexagon in the "chromaticity plane". Chroma is the relative size of the hexagon passing through a point, and hue is how far around that hexagon's edge the point lies.|alt=When an RGB cube, tilted so that its white corner rests vertically above its black corner, is projected into the plane perpendicular to that neutral axis, it makes the shape of a hexagon, with red, yellow, green, cyan, blue, and magenta arranged counterclockwise at its corners. This projection defines the hue and chroma of any color, as described in the caption and article text.]]

In each of our models, we calculate both ''hue'' and what this article will call [[colorfulness|''chroma'']], after Joblove and Greenberg (1978), in the same way – that is, the hue of a color has the same numerical values in all of these models, as does its chroma. If we take our tilted RGB cube, and [[3D projection|project]] it onto the "chromaticity [[plane (geometry)|plane]]" [[perpendicular]] to the neutral axis, our projection takes the shape of a hexagon, with red, yellow, green, cyan, blue, and magenta at its corners ({{nobr|fig. 9}}). ''Hue'' is roughly the angle of the [[Euclidean vector|vector]] to a point in the projection, with red at 0°, while ''chroma'' is roughly the distance of the point from the origin.{{refn|group=upper-alpha |Using the ''chroma'' here not only agrees with the original [[#Joblove|Joblove and Greenberg (1978)]] paper, but is also in the proper spirit of the psychometric definition of the term. Some models call this attribute ''saturation'' – for instance [[Adobe Photoshop]]'s "Saturation" blend mode – but such use is even more confusing than the use of the term in HSL or HSV, especially when two substantially different definitions are used side by side.}}{{refn|group=upper-alpha |name=formulasources|Most of the computer graphics papers and books discussing HSL or HSV have a formula or algorithm describing them formally. Our formulas which follow are some mix of those. See, for instance, [[#Agoston|Agoston (2005)]] or [[#Foley|Foley (1995)]]}}

More precisely, both hue and chroma in this model are defined with respect to the hexagonal shape of the projection. The ''chroma'' is the proportion of the distance from the origin to the edge of the hexagon. In the lower part of the adjacent diagram, this is the ratio of lengths {{nobr|''OP''/''{{prime|OP}}''}}, or alternatively the ratio of the radii of the two hexagons. This ratio is the difference between the largest and smallest values among ''R'', ''G'', or ''B'' in a color. To make our definitions easier to write, we'll define these maximum, minimum, and chroma component values as ''M'', ''m'', and ''C'', respectively.{{refn|group=upper-alpha |[[#Hanbury2002|Hanbury and Serra (2002)]] put a great deal of effort into explaining why what we call ''chroma'' here can be written as {{nobr|max(''R'', ''G'', ''B'') − min(''R'', ''G'', ''B''}}), and showing that this value is a [[seminorm]]. They reserve the name ''chroma'' for the [[Euclidean norm]] in the chromaticity plane (our ''C''<sub>2</sub>), and call this hexagonal distance ''saturation'' instead, as part of their IHLS model}}
: <math>M = \max(R, G, B)</math>
: <math>m = \min(R, G, B)</math>
: <math>C = \operatorname{range}(R, G, B) = M - m</math>

These operations do not require R, G and B values to be normalized to a specific range (e.g. a range of 0–1 works as well as a range of 0–255).

To understand why chroma can be written as {{nobr|''M'' − ''m''}}, notice that any neutral color, with {{nobr|1=''R'' = ''G'' = ''B''}}, projects onto the origin and so has 0 chroma. Thus if we add or subtract the same amount from all three of ''R'', ''G'', and ''B'', we move vertically within our tilted cube, and do not change the projection. Therefore, any two colors of {{nobr|(''R'', ''G'', ''B'')}} and {{nobr|(''R'' − ''m'', ''G'' − ''m'', ''B'' − ''m'')}} project on the same point, and have the same chroma. The chroma of a color with one of its components equal to zero {{nobr|1=(''m'' = 0)}} is simply the maximum of the other two components. This chroma is ''M'' in the particular case of a color with a zero component, and {{nobr|''M'' − ''m''}} in general.

The ''hue'' is the proportion of the distance around the edge of the hexagon which passes through the projected point, originally measured on the range {{nobr|[0, 1]}} but now typically measured in [[degree (angle)|degrees]] {{nobr|[0°, 360°)}}. For points which project onto the origin in the chromaticity plane (i.e., grays), hue is undefined. Mathematically, this definition of hue is written [[piecewise]]:{{refn|group=upper-alpha |In the following, the multiplication of hue by 60° – that is, 360°/6 – can be seen as the hexagonal-geometry analogue of the conversion from [[radian]]s to degrees, a multiplication by 360°/2''π'': the circumference of a [[unit circle]] is 2''π''; the circumference of a unit hexagon is 6.}}
: <math>H' = \begin{cases}
   \mathrm{undefined},    &\text{if } C = 0 \\
   \frac{G - B}{C} \bmod 6, &\text{if } M = R \\
   \frac{B - R}{C} + 2,    &\text{if } M = G \\
   \frac{R - G}{C} + 4,    &\text{if } M = B
  \end{cases}</math>
: <math>H = 60^\circ \times H'</math>

Sometimes, neutral colors (i.e. with {{nobr|1=''C'' = 0}}) are assigned a hue of 0° for convenience of representation.

[[File:hsv-hexagons-to-circles.svg|thumb|right|300px|Fig. 10. The definitions of ''hue'' and ''chroma'' in HSL and HSV have the effect of warping hexagons into circles.|alt=Pictured at left is the hexagonal projection shown earlier. At right, each side of the hexagon has been changed into a 60° arc of a circle with the same radius.]]
These definitions amount to a geometric warping of hexagons into circles: each side of the hexagon is mapped linearly onto a 60° arc of the circle ({{nobr|fig. 10}}). After such a transformation, hue is precisely the angle around the origin and chroma the distance from the origin: the angle and magnitude of the [[Euclidean vector|vector]] pointing to a color.

[[File:hsv-polar-coord-hue-chroma.svg|thumb|right|300px|Fig. 11. Constructing rectangular chromaticity coordinates ''α'' and ''β'', and then transforming those into hue ''H''<sub>2</sub> and chroma ''C''<sub>2</sub> yields slightly different values than computing hexagonal hue ''H'' and chroma ''C'': compare the numbers in this diagram to those earlier in this section.|alt=Instead of measuring hue and chroma with reference to the hexagonal edge of the projection of the RGB cube into the plane perpendicular to its neutral axis, we can define chromaticity coordinates alpha and beta in the plane – with alpha pointing in the direction of red, and beta perpendicular to it – and then define hue ''H''<sub>2</sub> and chroma ''C''<sub>2</sub> as the polar coordinates of these. That is, the tangent of hue is beta over alpha, and chroma squared is alpha squared plus beta squared.]]
Sometimes for image analysis applications, this hexagon-to-circle transformation is skipped, and ''hue'' and ''chroma'' (we'll denote these ''H''<sub>2</sub> and ''C''<sub>2</sub>) are defined by the usual cartesian-to-polar coordinate transformations ({{nobr|fig. 11}}). The easiest way to derive those is via a pair of cartesian chromaticity coordinates which we'll call ''α'' and ''β'':<ref name=Hanbury2002>[[#Hanbury2002|Hanbury and Serra (2002)]]</ref><ref name=Hanbury2008>[[#Hanbury2008|Hanbury (2008)]]</ref><ref>{{cite journal|author1=Patrick Lambert |author2=Thierry Carron |doi=10.1016/S0031-3203(99)00010-2|title=Symbolic fusion of luminance-hue-chroma features for region segmentation|year=1999|journal=Pattern Recognition|volume=32|issue=11|pages=1857|bibcode=1999PatRe..32.1857L }}</ref>
: <math>\alpha = R - G \cdot \cos(60^{\circ}) - B \cdot \cos(60^{\circ}) = \tfrac{1}{2}(2R - G - B)</math>
: <math>\beta = G \cdot \sin(60^{\circ}) - B \cdot \sin(60^{\circ}) = \tfrac{\sqrt{3}}{2}(G - B)</math>
: <math>H_2 = \operatorname{atan2}(\beta, \alpha)</math>
: <math>C_2 = \operatorname{gmean}(\alpha, \beta) = \sqrt{\alpha^2 + \beta^2}</math>
(The [[atan2]] function, a "two-argument arctangent", computes the angle from a cartesian coordinate pair.)

Notice that these two definitions of hue (''H'' and ''H''<sub>2</sub>) nearly coincide, with a maximum difference between them for any color of about 1.12° – which occurs at twelve particular hues, for instance {{nobr|1=''H'' = 13.38°}}, {{nobr|1=''H''<sub>2</sub> = 12.26°}} – and with {{nobr|1=''H'' = ''H''<sub>2</sub>}} for every multiple of 30°. The two definitions of chroma (''C'' and ''C''<sub>2</sub>) differ more substantially: they are equal at the corners of our hexagon, but at points halfway between two corners, such as {{nobr|1=''H'' = ''H''<sub>2</sub> = 30°}}, we have {{math|1=''C'' = 1}}, but  <math display="inline">C_2 = \sqrt{\frac{3}{4}} \approx 0.866,</math> a difference of about 13.4%.

==={{Anchor|Lightness|Value|Brightness|Intensity}} Lightness===

[[File:hsl-hsv chroma-lightness slices.svg|thumb|right|300px|Fig. 12a–d. Four different possible "lightness" dimensions, plotted against chroma, for a pair of complementary hues. Each plot is a vertical cross-section of its three-dimensional color solid.|alt=When we plot HSV value against chroma, the result, regardless of hue, is an upside-down isosceles triangle, with black at the bottom, and white at the top bracketed by the most chromatic colors of two complementary hues at the top right and left corners. When we plot HSL lightness against chroma, the result is a rhombus, again with black at the bottom and white at the top, but with the colorful complements at horizontal ends of the line halfway between them. When we plot the component average, sometimes called HSI intensity, against chroma, the result is a parallelogram whose shape changes depending on hue, as the most chromatic colors for each hue vary between one third and two thirds between black and white. Plotting luma against chroma yields a parallelogram of much more diverse shape: blue lies about 10 percent of the way from black to white, while its complement yellow lies 90 percent of the way there; by contrast, green is about 60 percent of the way from black to white while its complement magenta is 40 percent of the way there.]]

While the definition of ''hue'' is relatively uncontroversial – it roughly satisfies the criterion that colors of the same perceived hue should have the same numerical hue – the definition of a ''lightness'' or ''value'' dimension is less obvious: there are several possibilities depending on the purpose and goals of the representation. Here are four of the most common ({{nobr|fig. 12}}; three of these are also shown in [[#Color-making attributes|{{nobr|fig. 8}}]]):

* The simplest definition is just the [[arithmetic mean]], i.e. average, of the three components, in the HSI model called ''intensity'' ({{nobr|fig. 12a}}). This is simply the projection of a point onto the neutral axis – the vertical height of a point in our tilted cube. The advantage is that, together with Euclidean-distance calculations of hue and chroma, this representation preserves distances and angles from the geometry of the RGB cube.<ref name=Hanbury2008/><ref>Rafael C. Gonzalez and Richard Eugene Woods (2008). ''Digital Image Processing'', 3rd ed. Upper Saddle River, NJ: Prentice Hall. {{ISBN|0-13-168728-X}}. [https://books.google.com/books?id=8uGOnjRGEzoC&pg=PA410&lpg=PA410 {{nobr|pp. 407–413}}].</ref>
*: <math>I = \operatorname{avg}(R, G, B) = \tfrac{1}{3}(R + G + B)</math>
* In the HSV "hexcone" model, ''value'' is defined as the largest component of a color, our ''M'' above ({{nobr|fig. 12b}}). This places all three primaries, and also all of the "secondary colors" – cyan, yellow, and magenta – into a plane with white, forming a [[hexagonal pyramid]] out of the RGB cube.<ref name=Smith/>
*: <math>V = \max(R, G, B) = M</math>
* In the HSL "bi-hexcone" model, ''lightness'' is defined as the average of the largest and smallest color components ({{nobr|fig. 12c}}), i.e. the [[mid-range]] of the RGB components. This definition also puts the primary and secondary colors into a plane, but a plane passing halfway between white and black. The resulting color solid is a double-cone similar to Ostwald's, [[#Motivation|shown above]].<ref name=Joblove/>
*: <math>L = \operatorname{mid}(R, G, B) = \tfrac{1}{2}(M + m)</math>
* A more perceptually relevant alternative is to use [[luma (video)|''luma'']], {{nobr|''{{prime|Y}}''}}, as a lightness dimension ({{nobr|fig. 12d}}). Luma is the [[weighted average]] of gamma-corrected ''R'', ''G'', and ''B'', based on their contribution to perceived lightness, long used as the monochromatic dimension in color television broadcast. For [[sRGB]], the [[Rec. 709]] primaries yield {{nobr|''{{prime|Y}}''<sub>709</sub>}}, digital [[NTSC]] uses {{nobr|''{{prime|Y}}''<sub>601</sub>}} according to [[Rec. 601]] and some other primaries are also in use which result in different coefficients.<ref>[[#Poynton|Poynton (1997)]]. [http://www.poynton.com/notes/colour_and_gamma/ColorFAQ.html#RTFToC9 "What weighting of red, green and blue corresponds to brightness?"]</ref>{{refn|group=upper-alpha |For a more specific discussion of the term ''luma'', see Charles [[#Poynton2008|Poynton (2008)]]. See also [[RGB color space#Specifications]]. Photoshop exclusively uses the NTSC coefficients for its "Luminosity" blend mode regardless of the RGB color space involved.<ref>Bruce Lindbloom (2001-09-25). http://lists.apple.com/archives/colorsync-users/2001/Sep/msg00488.html {{Webarchive|url=https://web.archive.org/web/20110707173255/http://lists.apple.com/archives/colorsync-users/2001/Sep/msg00488.html |date=2011-07-07 }} "Re: Luminosity channel...".</ref>}}
*: <math>Y'_\text{601} = 0.299\cdot R + 0.587\cdot G + 0.114\cdot B</math> (SDTV)<!--525 lines-->
*: <math>Y'_\text{240} = 0.212\cdot R + 0.701\cdot G + 0.087\cdot B</math> [[Adobe RGB color space|(Adobe)]]<!--also SMPTE 145-->
*: <math>Y'_\text{709} = 0.2126\cdot R + 0.7152\cdot G + 0.0722\cdot B</math> [[Rec. 709|(HDTV)]]
*: <math>Y'_\text{2020}  = 0.2627\cdot R + 0.6780\cdot G + 0.0593\cdot B</math> [[Rec. 2020|(UHDTV, HDR)]]<!--also Rec. 2100-->

All four of these leave the neutral axis alone. That is, for colors with {{nobr|1=''R'' = ''G'' = ''B''}}, any of the four formulations yields a lightness equal to the value of ''R'', ''G'', or ''B''.

For a graphical comparison, see [[#Disadvantages|fig. 13 below]].

{{clear}}

===Saturation===

[[File:hsl-hsv saturation-lightness slices.svg|thumb|right|300px|Fig. 14a–d. In both HSL and HSV, ''saturation'' is simply the chroma scaled to fill the interval {{nobr|[0, 1]}} for every combination of hue and lightness or value.]]

When encoding colors in a hue/lightness/chroma or hue/value/chroma model (using the definitions from the previous two sections), not all combinations of lightness (or value) and chroma are meaningful: that is, half of the colors denotable using {{nobr|''H'' ∈ [0°, 360°)}}, {{nobr|''C'' ∈ [0, 1]}}, and {{nobr|''V'' ∈ [0, 1]}} fall outside the RGB gamut (the gray parts of the slices in figure 14). The creators of these models considered this a problem for some uses. For example, in a color selection interface with two of the dimensions in a rectangle and the third on a slider, half of that rectangle is made of unused space. Now imagine we have a slider for lightness: the user's intent when adjusting this slider is potentially ambiguous: how should the software deal with out-of-gamut colors? Or conversely, If the user has selected as colorful as possible a dark purple {{nobr|{{colorsample2|#42007F}},}} and then shifts the lightness slider upward, what should be done: would the user prefer to see a lighter purple still as colorful as possible for the given hue and lightness {{nobr|{{colorsample2|#7700E5}},}} or a lighter purple of exactly the same chroma as the original color {{nobr|{{colorsample2|#7533B2}}?}}<ref name=Joblove/>

To solve problems such as these, the HSL and HSV models scale the chroma so that it always fits into the range {{nobr|[0, 1]}} for every combination of hue and lightness or value, calling the new attribute ''saturation'' in both cases (fig. 14). To calculate either, simply divide the chroma by the maximum chroma for that value or lightness.
: <math>S_V = \begin{cases}
  0,      &\text{if } V = 0 \\
  \frac{C}{V}, &\text{otherwise}
\end{cases}</math>
:<math>S_L = \begin{cases}
  0,       &\text{if } L = 1 \text{ or } L = 0 \\
  \frac{C}{1 - |2L - 1|},  &\text{otherwise}
\end{cases}</math>

[[File:hsi saturation-intensity slices.svg|thumb|right|300px|Fig. 15a–b. In HSI, ''saturation'', shown in the slice on the right, is roughly the chroma relative to lightness. Also common is a model with dimensions ''I'', ''H''<sub>2</sub>, ''C''<sub>2</sub>, shown in the slice on the left. Notice that the hue in these slices is the same as the hue above, but ''H'' differs slightly from ''H''<sub>2</sub>.]]

The HSI model commonly used for computer vision, which takes ''H''<sub>2</sub> as a hue dimension and the component average ''I'' ("intensity") as a lightness dimension, does not attempt to "fill" a cylinder by its definition of saturation. Instead of presenting color choice or modification interfaces to end users, the goal of HSI is to facilitate separation of shapes in an image. Saturation is therefore defined in line with the psychometric definition: chroma relative to lightness ({{nobr|fig. 15}}). See the [[#Use in image analysis|Use in image analysis]] section of this article.<ref name=Cheng>[[#Cheng|Cheng et al. (2001)]]</ref>
: <math>S_I = \begin{cases}
  0, &\text{if } I = 0 \\
  1 - \frac{m}{I}, &\text{otherwise}
\end{cases}</math>

Using the same name for these three different definitions of saturation leads to some confusion, as the three attributes describe substantially different color relationships; in HSV and HSI, the term roughly matches the psychometric definition, of a chroma of a color relative to its own lightness, but in HSL it does not come close. Even worse, the word ''saturation'' is also often used for one of the measurements we call chroma above (''C'' or ''C''<sub>2</sub>).

===Examples===
All parameter values shown below are given as values in the [[interval (mathematics)|interval]] {{nobr|[0, 1]}}, except those for ''H'' and ''H''<sub>2</sub>, which are in the interval {{nobr|[0°, 360°)}}.{{refn|group=upper-alpha |The first nine colors in this table were chosen by hand, and the last ten colors were chosen at random.}}

{| class="wikitable" style="text-align:right;" cellpadding="6"
|- style="text-align:center;vertical-align:baseline;"
!Color
!style="min-width:3.2em;"|''R''
!style="min-width:3.2em;"|''G''
!style="min-width:3.2em;"|''B''
!style="min-width:3.2em;"|''H''
!style="min-width:3.2em;"|''H''<sub>2</sub>
!style="min-width:3.2em;"|''C''
!style="min-width:3.2em;"|''C''<sub>2</sub>
!style="min-width:3.2em;"|''V''
!style="min-width:3.2em;"|''L''
!style="min-width:3.2em;"|''I''
!style="min-width:3.2em;"|''{{prime|Y}}''<sub>601</sub>
!style="min-width:3.2em;"|''S''<sub>''HSV''</sub>
!style="min-width:3.2em;"|''S''<sub>''HSL''</sub>
!style="min-width:3.2em;"|''S''<sub>''HSI''</sub>
|-
|style="background-color:#FFFFFF; color:#FFFFFF"; title="#FFFFFF"; font-family=monospace, monospace|{{Ntsh|0}}#FFFFFF
| 1.000
| 1.000
| 1.000
|style="padding-right:.5em;" {{n/a}}
|style="padding-right:.5em;" {{n/a}}
| 0.000
| 0.000
| 1.000
| 1.000
| 1.000
| 1.000
| 0.000
| 0.000
| 0.000
|-
|style="background-color:#808080; color:#808080"; title="#808080"; font-family=monospace, monospace|{{Ntsh|1}}#808080
| 0.500
| 0.500
| 0.500
|style="padding-right:.5em;" {{n/a}}
|style="padding-right:.5em;" {{n/a}}
| 0.000
| 0.000
| 0.500
| 0.500
| 0.500
| 0.500
| 0.000
| 0.000
| 0.000
|-
|style="background-color:#000000; color:#000000"; title="#000000"; font-family=monospace, monospace|{{Ntsh|2}}#000000
| 0.000
| 0.000
| 0.000
|style="padding-right:.5em;" {{n/a}}
|style="padding-right:.5em;" {{n/a}}
| 0.000
| 0.000
| 0.000
| 0.000
| 0.000
| 0.000
| 0.000
| 0.000
| 0.000
|-
|style="background-color:#FF0000; color:#FF0000"; title="#FF0000"; font-family=monospace, monospace; font-family=monospace, monospace|{{Ntsh|3}}#FF0000
| 1.000
| 0.000
| 0.000
| {{Nts|0.0}}°
| {{Nts|0.0}}°
| 1.000
| 1.000
| 1.000
| 0.500
| 0.333
| 0.299
| 1.000
| 1.000
| 1.000
|-
|style="background-color:#BFBF00; color:#BFBF00"; title="#BFBF00"; font-family=monospace, monospace|{{Ntsh|4}}#BFBF00
| 0.750
| 0.750
| 0.000
| {{Nts|60.0}}°
| {{Nts|60.0}}°
| 0.750
| 0.750
| 0.750
| 0.375
| 0.500
| 0.664
| 1.000
| 1.000
| 1.000
|-
|style="background-color:#008000; color:#008000"; title="#008000"; font-family=monospace, monospace|{{Ntsh|5}}#008000
| 0.000
| 0.500
| 0.000
| {{Nts|120.0}}°
| {{Nts|120.0}}°
| 0.500
| 0.500
| 0.500
| 0.250
| 0.167
| 0.293
| 1.000
| 1.000
| 1.000
|-
|style="background-color:#80FFFF; color:#80FFFF"; title="#80FFFF"; font-family=monospace, monospace|{{Ntsh|6}}#80FFFF
| 0.500
| 1.000
| 1.000
| {{Nts|180.0}}°
| {{Nts|180.0}}°
| 0.500
| 0.500
| 1.000
| 0.750
| 0.833
| 0.850
| 0.500
| 1.000
| 0.400
|-
|style="background-color:#8080FF; color:#8080FF"; title="#8080FF"; font-family=monospace, monospace|{{Ntsh|7}}#8080FF
| 0.500
| 0.500
| 1.000
| {{Nts|240.0}}°
| {{Nts|240.0}}°
| 0.500
| 0.500
| 1.000
| 0.750
| 0.667
| 0.557
| 0.500
| 1.000
| 0.250
|-
|style="background-color:#BF40BF; color:#BF40BF"; title="#BF40BF"; font-family=monospace, monospace|{{Ntsh|8}}#BF40BF
| 0.750
| 0.250
| 0.750
| {{Nts|300.0}}°
| {{Nts|300.0}}°
| 0.500
| 0.500
| 0.750
| 0.500
| 0.583
| 0.457
| 0.667
| 0.500
| 0.571
|-
|style="background-color:#A0A424; color:#A0A424"; title="#A0A424"; font-family=monospace, monospace|{{Ntsh|9}}#A0A424
| 0.628
| 0.643
| 0.142
| {{Nts|61.8}}°
| {{Nts|61.5}}°
| 0.501
| 0.494
| 0.643
| 0.393
| 0.471
| 0.581
| 0.779
| 0.638
| 0.699
|-
|style="background-color:#411BEA; color:#411BEA"; title="#411BEA"; font-family=monospace, monospace|{{Ntsh|10}}#411BEA
| 0.255
| 0.104
| 0.918
| {{Nts|251.1}}°
| {{Nts|250.0}}°
| 0.814
| 0.750
| 0.918
| 0.511
| 0.426
| 0.242
| 0.887
| 0.832
| 0.756
|-
|style="background-color:#1EAC41; color:#1EAC41"; title="#1EAC41"; font-family=monospace, monospace|{{Ntsh|11}}#1EAC41
| 0.116
| 0.675
| 0.255
| {{Nts|134.9}}°
| {{Nts|133.8}}°
| 0.559
| 0.504
| 0.675
| 0.396
| 0.349
| 0.460
| 0.828
| 0.707
| 0.667
|-
|style="background-color:#F0C80E; color:#F0C80E"; title="#F0C80E"; font-family=monospace, monospace|{{Ntsh|12}}#F0C80E
| 0.941
| 0.785
| 0.053
| {{Nts|49.5}}°
| {{Nts|50.5}}°
| 0.888
| 0.821
| 0.941
| 0.497
| 0.593
| 0.748
| 0.944
| 0.893
| 0.911
|-
|style="background-color:#B430E5; color:#B430E5"; title="#B430E5"; font-family=monospace, monospace|{{Ntsh|13}}#B430E5
| 0.704
| 0.187
| 0.897
| {{Nts|283.7}}°
| {{Nts|284.8}}°
| 0.710
| 0.636
| 0.897
| 0.542
| 0.596
| 0.423
| 0.792
| 0.775
| 0.686
|-
|style="background-color:#ED7651; color:#ED7651"; title="#ED7651"; font-family=monospace, monospace|{{Ntsh|14}}#ED7651
| 0.931
| 0.463
| 0.316
| {{Nts|14.3}}°
| {{Nts|13.2}}°
| 0.615
| 0.556
| 0.931
| 0.624
| 0.570
| 0.586
| 0.661
| 0.817
| 0.446
|-
|style="background-color:#FEF888; color:#FEF888"; title="#FEF888"; font-family=monospace, monospace|{{Ntsh|15}}#FEF888
| 0.998
| 0.974
| 0.532
| {{Nts|56.9}}°
| {{Nts|57.4}}°
| 0.466
| 0.454
| 0.998
| 0.765
| 0.835
| 0.931
| 0.467
| 0.991
| 0.363
|-
|style="background-color:#19CB97; color:#19CB97"; title="#19CB97"; font-family=monospace, monospace|{{Ntsh|16}}#19CB97
| 0.099
| 0.795
| 0.591
| {{Nts|162.4}}°
| {{Nts|163.4}}°
| 0.696
| 0.620
| 0.795
| 0.447
| 0.495
| 0.564
| 0.875
| 0.779
| 0.800
|-
|style="background-color:#362698; color:#362698"; title="#362698"; font-family=monospace, monospace|{{Ntsh|17}}#362698
| 0.211
| 0.149
| 0.597
| {{Nts|248.3}}°
| {{Nts|247.3}}°
| 0.448
| 0.420
| 0.597
| 0.373
| 0.319
| 0.219
| 0.750
| 0.601
| 0.533
|-
|style="background-color:#7E7EB8; color:#7E7EB8"; title="#7E7EB8"; font-family=monospace, monospace|{{Ntsh|18}}#7E7EB8
| 0.495
| 0.493
| 0.721
| {{Nts|240.5}}°
| {{Nts|240.4}}°
| 0.228
| 0.227
| 0.721
| 0.607
| 0.570
| 0.520
| 0.316
| 0.290
| 0.135
|}