Editing HSL and HSV (section)

==Color conversion formulae==
To convert from HSL or HSV to RGB, we essentially invert the steps listed [[#General approach|above]] (as before, {{math|1=''R'', ''G'', ''B'' [[∈]] [[Unit interval|[0, 1]]]}}). First, we compute chroma, by multiplying saturation by the maximum chroma for a given lightness or value. Next, we find the point on one of the bottom three faces of the RGB cube which has the same hue and chroma as our color (and therefore projects onto the same point in the chromaticity plane). Finally, we add equal amounts of ''R'', ''G'', and ''B'' to reach the proper lightness or value.{{refn|group=upper-alpha |name=formulasources}}

=== To RGB ===
====HSL to RGB====

Given a color with hue {{math|''H'' ∈ [0°, 360°)}}, saturation {{math|''S''<sub>''L''</sub> ∈ [0, 1]}}, and lightness {{math|''L'' ∈ [0, 1]}}, we first find chroma:
: <math>C = (1 - \left\vert 2 L - 1 \right\vert) \times S_L</math>

Then we can find a point {{math|(''R''<sub>1</sub>, ''G''<sub>1</sub>, ''B''<sub>1</sub>)}} 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):
: <math>H^\prime = \frac{H}{60^\circ}</math>
: <math>X = C \times (1 - |H^\prime \;\bmod 2 - 1|)</math>
In the above equation, the notation <math>H^\prime \;\bmod 2</math> refers to the remainder of the [[Euclidean division]] of <math>H^\prime</math> by 2. <math>H^\prime</math> is not necessarily an integer.
: <math>(R_1, G_1, B_1) = \begin{cases}
  (C, X, 0) &\text{if } 0 \leq H^\prime < 1 \\
  (X, C, 0) &\text{if } 1 \leq H^\prime < 2 \\
  (0, C, X) &\text{if } 2 \leq H^\prime < 3 \\
  (0, X, C) &\text{if } 3 \leq H^\prime < 4 \\
  (X, 0, C) &\text{if } 4 \leq H^\prime < 5 \\
  (C, 0, X) &\text{if } 5 \leq H^\prime < 6
\end{cases}</math>

When <math>H^\prime</math> is an integer, the "neighbouring" formula would yield the same result, as <math>X = 0</math> or <math>X = C</math>, as appropriate.

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

: <math>m = L-\frac{C}{2}</math>
: <math>(R,G,B) = (R_{1}+m,G_{1}+m,B_{1}+m)</math>

===== HSL to RGB alternative =====

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

Given a color with hue <math>H \in [0^\circ,360^\circ]</math>, saturation <math>S=S_L \in [0,1]</math>, and lightness <math>L \in [0,1]</math>, we first define the function:
: <math>f(n) = L - a \max(-1, \min(k-3,9-k,1))</math>

where <math>k,n \in \mathbb R_{\geq 0}</math> and:

: <math>k = \left(n+\frac{H}{30^\circ}\right) \bmod 12</math>
: <math>a = S_L \min(L,1-L)</math>

And output R,G,B values (from <math>[0,1]^3</math>) are:

: <math>(R,G,B) = (f(0), f(8), f(4))</math>

The above alternative formulas allow for shorter implementations. In the above formulas the <math>a\bmod b</math> operation also returns the fractional part of the module e.g. <math> 7.4 \bmod 6 = 1.4</math>, and <math>k \in [0,12)</math>. 

The base shape <math>T(k) = t(n,H) = \max(\min(k-3,9-k,1), -1)</math> is constructed as follows: <math>t_1 = \min(k-3,9-k)</math> is a "triangle" for which values greater or equal to −1 start from k=2 and end at k=10, and the highest point is at k=6. Then by <math>t_2 = \min(t_1,1) = \min(k-3,9-k,1)</math> we change values bigger than 1 to equal 1. Then by  <math>t = \max(t_2,-1)</math>  we change values less than −1 to equal −1. At this point, we get something similar to the red shape from fig. 24 after a vertical flip (where the maximum is 1 and the minimum is −1). The R,G,B functions of {{mvar|H}} use this shape transformed in the following way: modulo-shifted on {{mvar|X}} (by {{mvar|n}}) (differently for R,G,B) scaled on {{mvar|Y}} (by <math>-a</math>) and shifted on {{mvar|Y}} (by {{mvar|L}}). 

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

: <math>t(n,H) = -t(n+6,H)</math>
: <math>\min\ (t(n,H), t(n+4,H), t(n+8,H)) = -1</math>
: <math>\max\ (t(n,H), t(n+4,H), t(n+8,H)) = +1</math>

====HSV to RGB====
[[File:HSV-RGB-comparison.svg|alt=|thumb|300x300px|Fig. 24. A graphical representation of RGB coordinates given values for HSV. This equation <math>V(1-S)= V - VS</math> shows origin of marked vertical axis values.]]
Given an HSV color with hue {{math|''H'' ∈ [0°, 360°)}}, saturation {{math|''S''<sub>''V''</sub> ∈ [0, 1]}}, and value {{math|''V'' ∈ [0, 1]}}, we can use the same strategy. First, we find chroma:
: <math>C = V \times S_V</math>

Then we can, again, find a point {{math|(''R''<sub>1</sub>, ''G''<sub>1</sub>, ''B''<sub>1</sub>)}} 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):

: <math>H^\prime = \frac{H}{60^\circ}</math>
: <math>X = C \times (1 - |H^\prime \bmod 2 - 1|)</math>
: <math> (R_1, G_1, B_1) = \begin{cases}
  (C, X, 0) &\text{if } 0 \leq H^\prime < 1 \\
  (X, C, 0) &\text{if } 1 \leq H^\prime < 2 \\
  (0, C, X) &\text{if } 2 \leq H^\prime < 3 \\
  (0, X, C) &\text{if } 3 \leq H^\prime < 4 \\
  (X, 0, C) &\text{if } 4 \leq H^\prime < 5 \\
  (C, 0, X) &\text{if } 5 \leq H^\prime < 6
\end{cases}</math>

As before, when <math>H^\prime</math> is an integer, "neighbouring" formulas would yield the same result.

Finally, we can find ''R'', ''G'', and ''B'' by adding the same amount to each component, to match value:
: <math>m = V - C</math>
: <math>(R, G, B) = (R_1 + m, G_1 + m, B_1 + m)</math>

===== HSV to RGB alternative =====

Given a color with hue <math>H \in [0^\circ,360^\circ]</math>, saturation <math>S=S_V \in [0,1]</math>, and value <math>V \in [0,1]</math>, first we define function :
: <math>f(n) = V - VS \max(0, \min(k, 4-k, 1))</math>
where <math>k,n \in \mathbb R_{\geq 0}</math>  and:
: <math>k = \left(n+\frac{H}{60^\circ}\right) \bmod 6</math>

And output R,G,B values (from <math>[0,1]^3</math>) are:
: <math>(R,G,B) = (f(5), f(3), f(1))</math>

Above alternative equivalent formulas allow shorter implementation. In above formulas the <math>a\bmod b</math> returns also fractional part of module e.g. the formula <math> 7.4 \bmod 6 = 1.4</math>. The values of <math>k \in \mathbb R \land k \in [0,6)</math>.  The base shape
: <math>t(n,H) = T(k) = \max(0, \min(k, 4-k, 1))</math> 
is constructed as follows: <math>t_1 = \min(k,4-k)</math> 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 <math>t_2 = \min(t_1,1) = \min(k,4-k,1)</math>, then change negative values to zero by <math>t = \max(t2,0)</math> – and we get (for <math>n=0</math>) something similar to green shape from Fig. 24 (which max value is 1 and min value is 0). The R,G,B functions of {{mvar|H}} use this shape transformed in following way: modulo-shifted on {{mvar|X}} (by {{mvar|n}}) (differently for R,G,B) scaled on {{mvar|Y}} (by <math>-VS</math>) and shifted on {{mvar|Y}} (by {{mvar|V}}). We observe following shape properties(Fig. 24 can help to get intuition about this):
: <math>t(n,H) = 1-t(n+3,H)</math>
: <math>\min(t(n,H), t(n+2,H), t(n+4,H)) = 0</math>
: <math>\max(t(n,H), t(n+2,H), t(n+4,H)) = 1</math>

====HSI to RGB====
Given an HSI color with hue {{math|''H'' ∈ [0°, 360°)}}, saturation {{math|''S''<sub>''I''</sub> ∈ [0, 1]}}, and intensity {{math|''I'' ∈ [0, 1]}}, we can use the same strategy, in a slightly different order:
: <math>H^\prime = \frac{H}{60^\circ}</math>
: <math>Z = 1 - |H^\prime \;\bmod 2 - 1|</math>
: <math>C = \frac{3 \cdot I \cdot S_I}{1 + Z}</math>
: <math>X = C \cdot Z</math>

Where <math>C</math> is the chroma.

Then we can, again, find a point {{math|(''R''<sub>1</sub>, ''G''<sub>1</sub>, ''B''<sub>1</sub>)}} 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):
: <math>(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}</math>

Overlap (when <math>H^\prime</math> is an integer) occurs because two ways to calculate the value are equivalent: <math>X = 0</math> or <math>X = C</math>, as appropriate.

Finally, we can find ''R'', ''G'', and ''B'' by adding the same amount to each component, to match lightness:
: <math>m = I \cdot (1 - S_I)</math>
: <math>(R, G, B) = (R_1 + m, G_1 + m, B_1 + m)</math>

====Luma, chroma and hue to RGB====
Given a color with hue {{math|''H'' ∈ [0°, 360°)}}, chroma {{math|''C'' ∈ [0, 1]}}, and luma {{math|''{{prime|Y}}''<sub>601</sub> ∈ [0, 1]}},{{refn|group=upper-alpha |Some points in this cylinder fall out of [[gamut]].}} we can again use the same strategy. Since we already have ''H'' and ''C'', we can straightaway find our point {{math|(''R''<sub>1</sub>, ''G''<sub>1</sub>, ''B''<sub>1</sub>)}} along the bottom three faces of the RGB cube:
: <math>\begin{align}
 H^\prime &= \frac{H}{60^\circ} \\
 X    &= C \times (1 - |H^\prime \bmod 2 - 1|)
\end{align}</math>
: <math>(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}</math>

Overlap (when <math>H^\prime</math> is an integer) occurs because two ways to calculate the value are equivalent: <math>X = 0</math> or <math>X = C</math>, as appropriate.

Then we can find ''R'', ''G'', and ''B'' by adding the same amount to each component, to match luma:
: <math>m = Y^\prime_{601} - (0.30R_1 + 0.59G_1 + 0.11B_1)</math>
: <math>(R, G, B) = (R_1 + m, G_1 + m, B_1 + m)</math>

=== Interconversion ===

==== HSV to HSL ====

Given a color with hue <math>H_V \in [0^\circ,360^\circ)</math>, saturation <math>S_V \in [0,1]</math>, and value <math>V \in [0,1]</math>,

: <math>H_L = H_V</math>
: <math>S_L = \begin{cases}
  0 & \text{if } L=0 \text{ or } L=1 \\
  \frac{V-L}{\min(L,1-L)} & \text{otherwise} \\
\end{cases}</math>
: <math>L = V\left(1 - \frac{S_V}{2}\right)</math>

==== HSL to HSV ====

Given a color with hue <math>H_L \in [0^\circ,360^\circ)</math>, saturation <math>S_L \in [0,1]</math>, and luminance <math>L \in [0,1]</math>,

: <math>H_V = H_L</math>
: <math>S_V = \begin{cases}
  0 & \text{if } V=0 \\
  2\left(1-\frac{L}{V}\right) & \text{otherwise} \\
\end{cases}</math>
: <math>V = L+S_L\min(L,1-L)</math>

=== From RGB ===
{{see also|#General approach}}
This is a reiteration of the previous conversion.

Value must be in range <math>R, G, B \in [0,1]</math>.

With maximum component (i. e. value) 

: <math>X_\text{max} := \max(R, G, B) =: V</math>

and minimum component 

: <math>X_\text{min} := \min(R, G, B) = V-C</math>, 

range (i. e. chroma) 

: <math>C := X_\text{max} - X_\text{min} = 2(V-L) </math>

and mid-range (i. e. lightness) 

: <math>L := \operatorname{mid}(R, G, B) = \frac{X_\text{max} + X_\text{min}}{2} = V-\frac{C}{2}</math>,

we get common hue:

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

and distinct saturations:

: <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=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}</math>