如何将颜色从HSL转换为RGB

1. Overview

In this tutorial, we’ll talk about how to convert a color from HSL to RGB. First, we’ll make a brief introduction to color models focusing on the HSL and RGB color space and then we’ll present a method to convert from HSL to RBG along with a detailed example.

2. Color Models

In order to use color in any computing device, we need to represent it as a vector of numerical values. To do this, we define color models which are mathematical models that map colors to a set of integers. There are many proposed color models that are suitable for different applications. In this tutorial, we’ll focus on the HSL and the RGB color model.

2.1. HSL

HSL is a color model that was proposed because it is very closely aligned to the way human vision perceives a color. It is very popular in computer graphics and consists of three components namely hue, saturation, and lightness.

HSL color model can be represented as a cylinder where the hue is an angular dimension starting at the red color at 0°, going through the green color at 120° and the blue color at 240°. The vertical axis corresponds to lightness where at the bottom we have zero lightness (black) and at the top we have full lightness (white). The last axis (horizontal) corresponds to saturation where pure colors are around the outside edge of the cylinder where saturation is equal to 1.

The above representation is shown in the image below:
hsl cylinder

2.2. RGB

RGB is the main color model that is used to display and represent an image in any electronic device nowadays. It stands for Red, Green, Blue since these are the primary colors that are mixed to represent any RGB color.

In RGB, a color is defined using three integer values (one for each primary color) ranging from 0 to 255. A value of zero corresponds to dark while a value of 255 to bright.

In the image below, we can see the RGB cube:

3. Method

Now, we’ll present a method to convert an HSL color representation to an RGB one. Let’s suppose that we have a color with values H, S and L where:

$H \in [0^\circ, 360^\circ]$
$S \in [0, 1]$
$L \in [0, 1]$

First, we compute chroma which is defined as:

$C = (1 - |2L - 1|) \times S$

Our next step is to search for a point ( $\mathbf{R_1, G_1, B_1}$ ) in one of the three faces of the RBG cube that has the same hue value and chroma value as our color. To do this, we first compute H^' and as follows:

$H^{'} = \frac{H}{60^\circ}$

$X = C \times (1 - |H^{'} \ mod \ 2 - 1|})$

where $H^{'} \ mod \ 2$ corresponds to the remainder of the euclidean division of $H^{'}$ with 2. Then, the point we search for is defined as:

$(R_1, G_1, B_1) = \begin{cases} (C, X, 0) \quad if \ 0 \leq H^{'} \leq 1 \\ (X, C, 0) \quad if \ 1 \leq H^{'} \leq 2 \\ (0, C, X) \quad if \ 2 \leq H^{'} \leq 3 \\ (0, X, C) \quad if \ 3 \leq H^{'} \leq 4 \\ (X, 0, C) \quad if \ 4 \leq H^{'} \leq 5 \\ (C, 0, X) \quad if \ 5 \leq H^{'} \leq 6 \\ \end{cases}$

The final step is to find the correct amount of lightness for our RGB color. To achieve this we add the same value to each RGB component where:

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

So, the converted RGB color is equal to $\mathbf{(R, G, B) = (R_1 + m, G_1 + m, B_1 + m) \times 255}$ .

4. Example

Now, we’ll apply the above equation in a simple example to better understand the conversion algorithm.

Let’s suppose that we have a color with $(H, S, L) = (210^\circ, 0.79, 0.3)$ and apply the previous series of equations:

$C = (1 - |0.6 - 1|) \times 0.79 = 0.6 \times 0.79 = 0.474$
$H^{'} = \frac{210^\circ}{60^\circ} = 3.5$
$X = 0.474 \times (1 - |3.5 \ mod \ 2 - 1|) = 0.474 \times 0.5 = 0.237$
$m = 0.3 - \frac{0.474}{2} = 0.063$

So, the respective RBG color is equal to $(R, G, B) = (0.063, 0.3, 0.537) \times 255 = (16, 77, 137)$ .

5. Conclusion

In this article, we presented a method that converts a color from HSL to RGB. First, we made an introduction to the color models and then we talked about the conversion method along with a simple example.

Persistence

REST

Security