HSL and HSV

The dimensions of the HSL and HSV geometries—simple transformations of the not-perceptually-based RGB model—are not directly related to the photometric color-making attributes of the same names, as defined by scientists such as the CIE or ASTM. Nonetheless, it is worth reviewing those definitions before leaping into the derivation of our models.[upper-alpha 4] For the definitions of color-making attributes which follow, see:[16][17][18][19][20][21]

Hue

The "attribute of a visual sensation according to which an area appears to be similar to one of the perceived colors: red, yellow, green, and blue, or to a combination of two of them".[16]

Radiance (L_e,Ω)

The radiant power of light passing through a particular surface per unit solid angle per unit projected area, measured in SI units in watt per steradian per square metre (W·sr⁻¹·m⁻²).

Luminance (Y or L_v,Ω)

The radiance weighted by the effect of each wavelength on a typical human observer, measured in SI units in candela per square meter (cd/m²). Often the term luminance is used for the relative luminance, Y/Y_n, where Y_n is the luminance of the reference white point.

Luma (Y′)

The weighted sum of gamma-corrected R′, G′, and B′ values, and used in Y′CbCr, for JPEG compression and video transmission.

Brightness (or value)

The "attribute of a visual sensation according to which an area appears to emit more or less light".[16]

Lightness

The "brightness relative to the brightness of a similarly illuminated white".[16]

Colorfulness

The "attribute of a visual sensation according to which the perceived color of an area appears to be more or less chromatic".[16]

Chroma

The "colorfulness relative to the brightness of a similarly illuminated white".[16]

Saturation

The "colorfulness of a stimulus relative to its own brightness".[16]

Brightness and colorfulness are absolute measures, which usually describe the 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 illumination. Saturation can be defined as either the ratio of colorfulness to brightness or that of chroma to lightness.

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 R, G, B ∈ [0, 1][upper-alpha 5]—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.[3][10][11]

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.

In each of our models, we calculate both hue and what this article will call 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 project it onto the "chromaticity 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 (fig. 9). Hue is roughly the angle of the vector to a point in the projection, with red at 0°, while chroma is roughly the distance of the point from the origin.[upper-alpha 6][upper-alpha 7]

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 OP/OP′, or alternately 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.[upper-alpha 8]

${\displaystyle M=\max(R,G,B)}$

${\displaystyle m=\min(R,G,B)}$

${\displaystyle C=\operatorname {range} (R,G,B)=M-m}$

To understand why chroma can be written as M − m, notice that any neutral color, with 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 (R, G, B) and (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 (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 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 [0, 1] but now typically measured in degrees [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:[upper-alpha 9]

${\displaystyle 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}}}$

${\displaystyle H=60^{\circ }\times H'}$

Sometimes, neutral colors (i.e. with C = 0) are assigned a hue of 0° for convenience of representation.

Fig. 10. The definitions of hue and chroma in HSL and HSV have the effect of warping hexagons into circles.

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 (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 vector pointing to a color.

Fig. 11. Constructing rectangular chromaticity coordinates α and β, and then transforming those into hue H₂ and chroma C₂ yields slightly different values than computing hexagonal hue H and chroma C: compare the numbers in this diagram to those earlier in this section.

Sometimes for image analysis applications, this hexagon-to-circle transformation is skipped, and hue and chroma (we'll denote these H₂ and C₂) are defined by the usual cartesian-to-polar coordinate transformations (fig. 11). The easiest way to derive those is via a pair of cartesian chromaticity coordinates which we'll call α and β:[22][23][24]

${\displaystyle \alpha =R-G\cdot \cos(60^{\circ })-B\cdot \cos(60^{\circ })={\tfrac {1}{2}}(2R-G-B)}$

${\displaystyle \beta =G\cdot \sin(60^{\circ })-B\cdot \sin(60^{\circ })={\tfrac {\sqrt {3}}{2}}(G-B)}$

${\displaystyle H_{2}=\operatorname {atan2} (\beta ,\alpha )}$

${\displaystyle C_{2}=\operatorname {gmean} (\alpha ,\beta )={\sqrt {\alpha ^{2}+\beta ^{2}}}}$

(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₂) nearly coincide, with a maximum difference between them for any color of about 1.12°—which occurs at twelve particular hues, for instance H = 13.38°, H₂ = 12.26°—and with H = H₂ for every multiple of 30°. The two definitions of chroma (C and C₂) differ more substantially: they are equal at the corners of our hexagon, but at points halfway between two corners, such as H = H₂ = 30°, we have C = 1, but C₂ = √¾ ≈ 0.866, a difference of about 13.4%.

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.

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 (fig. 12; three of these are also shown in fig. 8):

• The simplest definition is just the arithmetic mean, i.e. average, of the three components, in the HSI model called intensity (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.[23][25]

  ${\displaystyle I=\operatorname {avg} (R,G,B)={\tfrac {1}{3}}(R+G+B)}$

• In the HSV "hexcone" model, value is defined as the largest component of a color, our M above (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.[10]

  ${\displaystyle V=\max(R,G,B)=M}$

• In the HSL "bi-hexcone" model, lightness is defined as the average of the largest and smallest color components (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, shown above.[11]

  ${\displaystyle L=\operatorname {mid} (R,G,B)={\tfrac {1}{2}}(M+m)}$

• A more perceptually relevant alternative is to use luma, Y′, as a lightness dimension (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 Y′₇₀₉, digital NTSC uses Y′₆₀₁ according to Rec. 601 and some other primaries are also in use which result in different coefficients.[26][upper-alpha 10]

  ${\displaystyle Y'_{\text{601}}=0.2989\cdot R+0.5870\cdot G+0.1140\cdot B}$ (SDTV)

  ${\displaystyle Y'_{\text{240}}=0.212\cdot R+0.701\cdot G+0.087\cdot B}$ (Adobe)

  ${\displaystyle Y'_{\text{709}}=0.2126\cdot R+0.7152\cdot G+0.0722\cdot B}$ (HDTV)

  ${\displaystyle Y'_{\text{2020}}=0.2627\cdot R+0.6780\cdot G+0.0593\cdot B}$ (UHDTV, HDR)

All four of these leave the neutral axis alone. That is, for colors with 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 fig. 13 below.

Fig. 14a–d. In both HSL and HSV, saturation is simply the chroma scaled to fill the interval [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 H ∈ [0°, 360°), C ∈ [0, 1], and 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  , 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  , or a lighter purple of exactly the same chroma as the original color  ?[11]

To solve problems such as these, the HSL and HSV models scale the chroma so that it always fits into the range [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.

${\displaystyle S_{V}={\begin{cases}0,&{\text{if }}V=0\\{\frac {C}{V}},&{\text{otherwise}}\end{cases}}}$

${\displaystyle S_{L}={\begin{cases}0,&{\text{if }}L=1{\text{ or }}L=0\\{\frac {C}{1-|2L-1|}},&{\text{otherwise}}\end{cases}}}$

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₂, C₂, 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₂.

The HSI model commonly used for computer vision, which takes H₂ 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 (fig. 15). See the Use in image analysis section of this article.[28]

${\displaystyle S_{I}={\begin{cases}0,&{\text{if }}I=0\\1-{\frac {m}{I}},&{\text{otherwise}}\end{cases}}}$

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₂).

All parameter values shown below are given as percentages (interval [0, 1] scaled by a factor 100), except those for H and H₂ which are in the interval [0°, 360°].[upper-alpha 11]

Given a color with hue H ∈ [0°, 360°], saturation S_L ∈ [0, 1], and lightness L ∈ [0, 1], we first find chroma:

${\displaystyle C=(1-\left\vert 2L-1\right\vert )\times S_{L}}$

Then we can find a point (R₁, G₁, B₁) along the bottom three faces of the RGB cube, with the same hue and chroma as our color (using the intermediate value X for the second largest component of this color):

${\displaystyle H^{\prime }={\frac {H}{60^{\circ }}}}$

${\displaystyle X=C\cdot (1-|H^{\prime }\;{\bmod {2}}-1|)}$

In the above equation, the notation ${\displaystyle H^{\prime }\;{\bmod {2}}}$ refers to the remainder of the euclidian division of ${\displaystyle H^{\prime }}$ by 2. ${\displaystyle H^{\prime }}$ is not necessarily an integer.

${\displaystyle (R_{1},G_{1},B_{1})={\begin{cases}(0,0,0)&{\text{if }}H'{\text{ is undefined}}\\(C,X,0)&{\text{if }}0\leq H^{\prime }\leq 1\\(X,C,0)&{\text{if }}1\leq H^{\prime }\leq 2\\(0,C,X)&{\text{if }}2\leq H^{\prime }\leq 3\\(0,X,C)&{\text{if }}3\leq H^{\prime }\leq 4\\(X,0,C)&{\text{if }}4\leq H^{\prime }\leq 5\\(C,0,X)&{\text{if }}5\leq H^{\prime }\leq 6\end{cases}}}$

Overlap (when ${\displaystyle H^{\prime }}$ is an integer) occurs because two ways to calculate the value are equivalent: ${\displaystyle X=0}$ or ${\displaystyle X=C}$, as appropriate.

Finally, we can find R, G, and B by adding the same amount to each component, to match lightness:

${\displaystyle m=L-{\frac {C}{2}}}$

${\displaystyle (R,G,B)=(R_{1}+m,G_{1}+m,B_{1}+m)}$

The polygonal piecewise functions can be somewhat simplified by a clever use of minimum and maximum values as well as the remainder operation.

Given a color with hue ${\displaystyle H\in [0^{\circ },360^{\circ }]}$, saturation ${\displaystyle S=S_{L}\in [0,1]}$, and lightness ${\displaystyle L\in [0,1]}$, we first define the function:

${\displaystyle f(n)=L-a\max(-1,\min(k-3,9-k,1))}$

where ${\displaystyle k,n\in \mathbb {R} _{\geq 0}}$ and:

${\displaystyle k=(n+{\frac {H}{30^{\circ }}}){\bmod {1}}2}$

${\displaystyle a=S_{L}\min(L,1-L)}$

And output R,G,B values (from ${\displaystyle [0,1]^{3}}$) are:

${\displaystyle (R,G,B)=(f(0),f(8),f(4))}$

Above alternative equivalent formulas allow shorter implementation. In above formulas the ${\displaystyle a{\bmod {b}}}$ returns also fractional part of module e.g. the formula ${\displaystyle 7.4{\bmod {6}}=1.4}$. The values of ${\displaystyle k\in \mathbb {R} \land k\in [0,12)}$.

The base shape ${\displaystyle T(k)=t(n,H)=\max(\min(k-3,9-k,1),-1)}$ is constructed as follows: ${\displaystyle t_{1}=\min(k-3,9-k)}$ is "triangle" for which values greater or equal −1 starts from k=2 and ends for k=10, highest point is at k=6. Then by ${\displaystyle t_{2}=\min(t_{1},1)=\min(k-3,9-k,1)}$ we change values bigger than 1 to exact 1. Then by ${\displaystyle t=\max(t_{2},-1)}$ we change values less than −1 to exact −1. At this point we get something similar to red shape from fig. 24 after vertical flip (which max value is 1 and min value is −1). The R,G,B functions of ${\displaystyle H}$ use this shape transformed in following way: modulo-shifted on ${\displaystyle X}$ (by ${\displaystyle n}$) (differently for R,G,B) scaled on ${\displaystyle Y}$ (by ${\displaystyle -a}$) and shifted on ${\displaystyle Y}$ (by ${\displaystyle L}$).

We observe following shape properties (Fig. 24 can help to get intuition about them):

${\displaystyle t(n,H)=-t(n+6,H)}$

${\displaystyle \min \ (t(n,H),t(n+4,H),t(n+8,H))=-1}$

${\displaystyle \max \ (t(n,H),t(n+4,H),t(n+8,H))=+1}$

Fig. 24. A graphical representation of RGB coordinates given values for HSV. This equation ${\displaystyle V(1-S)=V-VS}$ shows origin of marked vertical axis values

Given an HSV color with hue H ∈ [0°, 360°], saturation S_V ∈ [0, 1], and value V ∈ [0, 1], we can use the same strategy. First, we find chroma:

${\displaystyle C=V\times S_{V}}$

Then we can, again, find a point (R₁, G₁, B₁) along the bottom three faces of the RGB cube, with the same hue and chroma as our color (using the intermediate value X for the second largest component of this color):

${\displaystyle H^{\prime }={\frac {H}{60^{\circ }}}}$

${\displaystyle X=C\times (1-|H^{\prime }{\bmod {2}}-1|)}$

${\displaystyle (R_{1},G_{1},B_{1})={\begin{cases}(0,0,0)&{\text{if }}H{\text{ is undefined}}\\(C,X,0)&{\text{if }}0\leq H^{\prime }\leq 1\\(X,C,0)&{\text{if }}1<H^{\prime }\leq 2\\(0,C,X)&{\text{if }}2<H^{\prime }\leq 3\\(0,X,C)&{\text{if }}3<H^{\prime }\leq 4\\(X,0,C)&{\text{if }}4<H^{\prime }\leq 5\\(C,0,X)&{\text{if }}5<H^{\prime }\leq 6\end{cases}}}$

Overlap (when ${\displaystyle H^{\prime }}$ is an integer) occurs because two ways to calculate the value are equivalent: ${\displaystyle X=0}$ or ${\displaystyle X=C}$, as appropriate.

Finally, we can find R, G, and B by adding the same amount to each component, to match value:

${\displaystyle m=V-C}$

${\displaystyle (R,G,B)=(R_{1}+m,G_{1}+m,B_{1}+m)}$

Given a color with hue ${\displaystyle H\in [0^{\circ },360^{\circ }]}$, saturation ${\displaystyle S=S_{V}\in [0,1]}$, and value ${\displaystyle V\in [0,1]}$, first we define function :

${\displaystyle f(n)=V-VS\max(0,\min(k,4-k,1))}$

where ${\displaystyle k,n\in \mathbb {R} _{\geq 0}}$ and:

${\displaystyle k=(n+{\frac {H}{60^{\circ }}}){\bmod {6}}}$

And output R,G,B values (from ${\displaystyle [0,1]^{3}}$) are:

${\displaystyle (R,G,B)=(f(5),f(3),f(1))}$

Above alternative equivalent formulas allow shorter implementation. In above formulas the ${\displaystyle a{\bmod {b}}}$ returns also fractional part of module e.g. the formula ${\displaystyle 7.4{\bmod {6}}=1.4}$. The values of ${\displaystyle k\in \mathbb {R} \land k\in [0,6)}$. The base shape

${\displaystyle t(n,H)=T(k)=\max(0,\min(k,4-k,1))}$

is constructed as follows: ${\displaystyle t_{1}=\min(k,4-k)}$ is "triangle" for which non-negative values starts from k=0, highest point at k=2 and "ends" at k=4, then we change values bigger than one to one by ${\displaystyle t_{2}=\min(t_{1},1)=\min(k,4-k,1)}$, then change negative values to zero by ${\displaystyle t=\max(t2,0)}$ – and we get (for ${\displaystyle n=0}$) something similar to green shape from Fig. 24 (which max value is 1 and min value is 0). The R,G,B functions of ${\displaystyle H}$ use this shape transformed in following way: modulo-shifted on ${\displaystyle X}$ (by ${\displaystyle n}$) (differently for R,G,B) scaled on ${\displaystyle Y}$ (by ${\displaystyle -VS}$) and shifted on ${\displaystyle Y}$ (by ${\displaystyle V}$). We observe following shape properties(Fig. 24 can help to get intuition about this):

${\displaystyle t(n,H)=1-t(n+3,H)}$

${\displaystyle \min(t(n,H),t(n+2,H),t(n+4,H))=0}$

${\displaystyle \max(t(n,H),t(n+2,H),t(n+4,H))=1}$

Given an HSI color with hue H ∈ [0°, 360°], saturation S_I ∈ [0, 1], and intensity I ∈ [0, 1], we can use the same strategy, in a slightly different order:

${\displaystyle H^{\prime }={\frac {H}{60^{\circ }}}}$

${\displaystyle Z=1-|H^{\prime }\;{\bmod {2}}-1|}$

${\displaystyle C={\frac {3\cdot I\cdot S_{I}}{1+Z}}}$

${\displaystyle X=C\cdot Z}$

Where ${\displaystyle C}$ is the chroma.

Then we can, again, find a point (R₁, G₁, B₁) along the bottom three faces of the RGB cube, with the same hue and chroma as our color (using the intermediate value X for the second largest component of this color):

${\displaystyle (R_{1},G_{1},B_{1})={\begin{cases}(0,0,0)&{\text{if }}H{\text{ is undefined}}\\(C,X,0)&{\text{if }}0\leq H^{\prime }\leq 1\\(X,C,0)&{\text{if }}1\leq H^{\prime }\leq 2\\(0,C,X)&{\text{if }}2\leq H^{\prime }\leq 3\\(0,X,C)&{\text{if }}3\leq H^{\prime }\leq 4\\(X,0,C)&{\text{if }}4\leq H^{\prime }\leq 5\\(C,0,X)&{\text{if }}5\leq H^{\prime }<6\end{cases}}}$

Overlap (when ${\displaystyle H^{\prime }}$ is an integer) occurs because two ways to calculate the value are equivalent: ${\displaystyle X=0}$ or ${\displaystyle X=C}$, as appropriate.

Finally, we can find R, G, and B by adding the same amount to each component, to match lightness:

${\displaystyle m=I\cdot (1-S_{I})}$

${\displaystyle (R,G,B)=(R_{1}+m,G_{1}+m,B_{1}+m)}$

Given a color with hue H ∈ [0°, 360°], chroma C ∈ [0, 1], and luma Y′₆₀₁ ∈ [0, 1],[upper-alpha 20] we can again use the same strategy. Since we already have H and C, we can straightaway find our point (R₁, G₁, B₁) along the bottom three faces of the RGB cube:

${\displaystyle {\begin{aligned}H^{\prime }&={\frac {H}{60^{\circ }}}\\X&=C\times (1-|H^{\prime }{\bmod {2}}-1|)\end{aligned}}}$

${\displaystyle (R_{1},G_{1},B_{1})={\begin{cases}(0,0,0)&{\text{if }}H{\text{ is undefined}}\\(C,X,0)&{\text{if }}0\leq H^{\prime }\leq 1\\(X,C,0)&{\text{if }}1\leq H^{\prime }\leq 2\\(0,C,X)&{\text{if }}2\leq H^{\prime }\leq 3\\(0,X,C)&{\text{if }}3\leq H^{\prime }\leq 4\\(X,0,C)&{\text{if }}4\leq H^{\prime }\leq 5\\(C,0,X)&{\text{if }}5\leq H^{\prime }<6\end{cases}}}$

Overlap (when ${\displaystyle H^{\prime }}$ is an integer) occurs because two ways to calculate the value are equivalent: ${\displaystyle X=0}$ or ${\displaystyle X=C}$, as appropriate.

Then we can find R, G, and B by adding the same amount to each component, to match luma:

${\displaystyle m=Y_{601}^{\prime }-(0.30R_{1}+0.59G_{1}+0.11B_{1})}$

${\displaystyle (R,G,B)=(R_{1}+m,G_{1}+m,B_{1}+m)}$

Given a color with hue ${\displaystyle H_{V}\in [0^{\circ },360^{\circ }]}$, saturation ${\displaystyle S_{V}\in [0,1]}$, and value ${\displaystyle V\in [0,1]}$,

${\displaystyle H_{L}=H_{V}}$

${\displaystyle L=V\left(1-{\frac {S_{V}}{2}}\right)}$

${\displaystyle S_{L}={\begin{cases}0&{\text{if }}L=0{\text{ or }}L=1\\{\frac {V-L}{\min(L,1-L)}}&{\text{otherwise}}\\\end{cases}}}$

Given a color with hue ${\displaystyle H_{L}\in [0^{\circ },360^{\circ }]}$, saturation ${\displaystyle S_{L}\in [0,1]}$, and luminance ${\displaystyle L\in [0,1]}$,

${\displaystyle H_{V}=H_{L}}$

${\displaystyle V=L+S_{L}\min(L,1-L)}$

${\displaystyle S_{V}={\begin{cases}0&{\text{if }}V=0\\2\left(1-{\frac {L}{V}}\right)&{\text{otherwise}}\\\end{cases}}}$

This is a reiteration of the previous conversion.

Value must be in range ${\displaystyle R,G,B\in [0,1]}$.

With maximum component (i. e. value)

${\displaystyle X_{max}:=\max(R,G,B)=:V}$

and minimum component

${\displaystyle X_{min}:=\min(R,G,B)=V-C}$,

range (i. e. chroma)

${\displaystyle C:=X_{max}-X_{min}=2(V-L)}$

and mid-range (i. e. lightness)

${\displaystyle L:=\operatorname {mid} (R,G,B)={\frac {X_{max}+X_{min}}{2}}=V-{\frac {C}{2}}}$,

we get common hue:

${\displaystyle H:={\begin{cases}0,&{\text{if }}C=0\\60^{\circ }\cdot \left(0+{\frac {G-B}{C}}\right),&{\text{if }}V=R\\60^{\circ }\cdot \left(2+{\frac {B-R}{C}}\right),&{\text{if }}V=G\\60^{\circ }\cdot \left(4+{\frac {R-G}{C}}\right),&{\text{if }}V=B\end{cases}}}$

and distinct saturations:

${\displaystyle S_{V}:={\begin{cases}0,&{\text{if }}V=0\\{\frac {C}{V}},&{\text{otherwise}}\end{cases}}}$

${\displaystyle S_{L}:={\begin{cases}0,&{\text{if }}L=0{\text{ or }}L=1\\{\frac {C}{1-\left\vert 2V-C-1\right\vert }}={\frac {2(V-L)}{1-\left\vert 2L-1\right\vert }}={\frac {V-L}{\min(L,1-L)}},&{\text{otherwise}}\end{cases}}}$