<p>First it converts the red, green, and blue values from the 8-bit unsigned integer range to floating point values between 0 and 1. It then figures out which component is the maximum, which is the minimum and the distance between the minimum and maximum. </p>

<p>If the min and max are equal, then the saturation is 0, and it makes no sense to calculate a hue. Here they are setting the hue to 0, but in reality, it's simply undefined. Assuming that no hue equals 0 hue can cause problem if you later manipulate the colors, so be careful with that.</p>

<p>If the min and max are not equal, then we can calculate a hue. The shape of the HSL color space is a double hexagonal cone. What the next part does is attempt to figure out which segment of the hexagonal cone the hue is in. If the maximum of the red, green, and blue, was the red channel, then it's in the area bounded by -60° to +60°. If green is the max, then the hue is between 60° and 180°, and if blue is the max, then the hue is between 180° and 300° (aka -60°). </p>

<p>The division in the hue calculation generates a value between -1 and 1. If red is the maximum component, then <code>green - blue</code> is either the middle value minus the lower value, or it's the lower value minus the middle value. And since the middle and lower value are never greater than the maximum, dividing by the delta will always give a value between -1 and 1. Once you have a value between -1 and 1, you multiply it by 60 to get the degrees. For the other 2 cases, you add either 2 or 4 before the multiply in order to rotate it 120° or 240° for the green and blue.</p>

<p>Next it calculates the lightness by simply averaging the min and max components. (This is a very poor way to represent the perceived brightness of a color, by the way.)</p>

<p>Finally, it calculates the saturation. If the delta is 0, then saturation is 0. Otherwise it divides the delta by <code>1 - abs(2 * L - 1)</code>. Essentially, it's saying that saturation is proportional to the distance between the minimum and the maximum values and inversely proportional to the lightness's distance from 50% lightness. In other words, as you move away from the vertical center of the double hex cone, towards the pointy ends, the distance between the min and max components has a bigger effect on saturation. A difference in the delta of, say, .1 at the center will not show much difference in saturation, but when the lightness is very close to either 0 or 1, it will make a large difference in saturation.</p>

CC BY-SA 4.0
2018-07-31T06:08:56.077Z
2018-07-31T16:01:54.800Z
2018-07-31T16:01:54.800Z
user1118321
<p>Im trying to complain the algorithm to calculate the HSL value form a RGB color. I understand the algorithm for the Hue, but im lost with the Lightness and saturation. Someone can explain why?</p>

<hr>

<p><strong>There is the algorithm:</strong></p>

<p>$$R'=R/255$$</p>

<p>$$G'=G/255$$</p>

<p>$$B'=B/255$$</p>

<p>$$C_{max}=\max\left(R',G',B'\right)$$</p>

<p>$$C_{min}=\min\left(R',G',B'\right)$$</p>

<p>$$\Delta=C_{max}-C_{min}$$</p>

<hr>

<p><strong>Hue Calculation:</strong></p>

<p>$$H = \begin{cases}
0^\circ &amp; ,\Delta=0\\
60^\circ \times \left(\frac{G'-B'}{\Delta}\mod 6\right) &amp; ,C_{max}=R'\\
60^\circ \times \left(\frac{B'-R'}{\Delta}+2\right) &amp; ,C_{max}=G'\\
60^\circ \times \left(\frac{R'-G'}{\Delta}+4\right) &amp; ,C_{max}=B'
\end{cases}$$</p>

<hr>

<p><strong>Lightness calculation:</strong></p>

<p>$$L=\frac{C_{max} + C_{min}}{2}$$</p>

<hr>

<p><strong>Saturation calculation:</strong></p>

<p>$$S=\begin{cases}
0 &amp; ,\Delta=0\\
\frac{\Delta}{1-|2L-1|} &amp; ,\Delta &lt;&gt; 0
\end{cases}$$</p>

<algorithm><mathematics><color><color-science>
Can someone explain this formula for parse RGB to HSL?
TheRedosan
# Can someone explain this formula for parse RGB to HSL?

(Asked by: username_0 on 2018-04-02)

Im trying to complain the algorithm to calculate the HSL value form a RGB color. I understand the algorithm for the Hue, but im lost with the Lightness and saturation. Someone can explain why?

---

**There is the algorithm:**

$$R'=R/255$$

$$G'=G/255$$

$$B'=B/255$$

$$C\_{max}=\max\left(R',G',B'\right)$$

$$C\_{min}=\min\left(R',G',B'\right)$$

$$\Delta=C\_{max}-C\_{min}$$

---

**Hue Calculation:**

$$H = \begin{cases}
0^\circ & ,\Delta=0\\
60^\circ \times \left(\frac{G'-B'}{\Delta}\mod 6\right) & ,C\_{max}=R'\\
60^\circ \times \left(\frac{B'-R'}{\Delta}+2\right) & ,C\_{max}=G'\\
60^\circ \times \left(\frac{R'-G'}{\Delta}+4\right) & ,C\_{max}=B'
\end{cases}$$

---

**Lightness calculation:**

$$L=\frac{C\_{max} + C\_{min}}{2}$$

---

**Saturation calculation:**

$$S=\begin{cases}
0 & ,\Delta=0\\
\frac{\Delta}{1-|2L-1|} & ,\Delta <> 0
\end{cases}$$

**Tags:** algorithm, mathematics, color, color-science


---

## 1 answers

### Answer by username_1 on 2018-07-31. Score: 3

First it converts the red, green, and blue values from the 8-bit unsigned integer range to floating point values between 0 and 1. It then figures out which component is the maximum, which is the minimum and the distance between the minimum and maximum.

If the min and max are equal, then the saturation is 0, and it makes no sense to calculate a hue. Here they are setting the hue to 0, but in reality, it's simply undefined. Assuming that no hue equals 0 hue can cause problem if you later manipulate the colors, so be careful with that.

If the min and max are not equal, then we can calculate a hue. The shape of the HSL color space is a double hexagonal cone. What the next part does is attempt to figure out which segment of the hexagonal cone the hue is in. If the maximum of the red, green, and blue, was the red channel, then it's in the area bounded by -60° to +60°. If green is the max, then the hue is between 60° and 180°, and if blue is the max, then the hue is between 180° and 300° (aka -60°).

The division in the hue calculation generates a value between -1 and 1. If red is the maximum component, then `green - blue` is either the middle value minus the lower value, or it's the lower value minus the middle value. And since the middle and lower value are never greater than the maximum, dividing by the delta will always give a value between -1 and 1. Once you have a value between -1 and 1, you multiply it by 60 to get the degrees. For the other 2 cases, you add either 2 or 4 before the multiply in order to rotate it 120° or 240° for the green and blue.

Next it calculates the lightness by simply averaging the min and max components. (This is a very poor way to represent the perceived brightness of a color, by the way.)

Finally, it calculates the saturation. If the delta is 0, then saturation is 0. Otherwise it divides the delta by `1 - abs(2 * L - 1)`. Essentially, it's saying that saturation is proportional to the distance between the minimum and the maximum values and inversely proportional to the lightness's distance from 50% lightness. In other words, as you move away from the vertical center of the double hex cone, towards the pointy ends, the distance between the min and max components has a bigger effect on saturation. A difference in the delta of, say, .1 at the center will not show much difference in saturation, but when the lightness is very close to either 0 or 1, it will make a large difference in saturation.


---

