RGB to HSL color conversion

RGB to HSL Converter

Convert RGB color values to HSL and HEX

RGB Values

Red (0-255):

Green (0-255):

Blue (0-255):

#FF0000

Conversion Results

HEX:

#FF0000

HSL:

hsl(0, 100%, 50%)

Hue:

0°

Saturation:

100%

Lightness:

50%

Hue: 0°

Saturation: 100%

Lightness: 50%

An RGB to HSL converter is a tool or algorithm that transforms colors from the RGB (Red, Green, Blue) color model to the HSL (Hue, Saturation, Lightness) model. This conversion is useful in digital graphics, web design, and image processing because HSL provides a more intuitive way to manipulate colors based on human perception rather than raw RGB values.

RGB Color Model

The RGB model defines colors using three components:

• Red (R) – Intensity (0 to 255)

• Green (G) – Intensity (0 to 255)

• Blue (B) – Intensity (0 to 255)

HSL Color Model

The HSL model represents colors based on three components:

 1. Hue (H) – The color type (0° to 360°)

• 0° = Red, 120° = Green, 240° = Blue

 2. Saturation (S) – The intensity of the color (0% to 100%)

• 0% = Grayscale, 100% = Fully saturated

 3. Lightness (L) – The brightness of the color (0% to 100%)

• 0% = Black, 50% = Pure color, 100% = White

RGB to HSL Conversion Algorithm

Step 1: Normalize RGB Values

Convert RGB values from 0–255 to 0–1:

$$R^{\mathrm{\prime }}=\frac{R}{255},G^{\mathrm{\prime }}=\frac{G}{255},B^{\mathrm{\prime }}=\frac{B}{255}$$

Step 2: Find Min and Max Values

Determine the minimum and maximum of the three components:

$$\text{Min}=\min (R^{\mathrm{\prime }},G^{\mathrm{\prime }},B^{\mathrm{\prime }})$$$$\text{Max}=\max (R^{\mathrm{\prime }},G^{\mathrm{\prime }},B^{\mathrm{\prime }})$$

Step 3: Calculate Lightness (L)

Lightness is the average of the min and max values:

$$L=\frac{\text{Min}+\text{Max}}{2}$$

Step 4: Calculate Saturation (S)

• If Min = Max, the color is grayscale (S = 0).

• Otherwise:

  $$S=\{\begin{array}{ll}\frac{\text{Max}-\text{Min}}{\text{Max}+\text{Min}}& \text{if }L\le 0.5\\ \frac{\text{Max}-\text{Min}}{2-(\text{Max}+\text{Min})}& \text{if }L>0.5\end{array}$$

Step 5: Calculate Hue (H)

• If Max = Min, hue is undefined (grayscale, H = 0).

• Otherwise:

  $$\text{Compute hue based on which component is the max:}$$$$H=\{\begin{array}{ll}60\mathrm{°}\times \left(\frac{G^{\mathrm{\prime }}-B^{\mathrm{\prime }}}{\text{Max}-\text{Min}}\right)+0\mathrm{°}& \text{if Max}=R^{\mathrm{\prime }}\\ 60\mathrm{°}\times \left(\frac{B^{\mathrm{\prime }}-R^{\mathrm{\prime }}}{\text{Max}-\text{Min}}\right)+120\mathrm{°}& \text{if Max}=G^{\mathrm{\prime }}\\ 60\mathrm{°}\times \left(\frac{R^{\mathrm{\prime }}-G^{\mathrm{\prime }}}{\text{Max}-\text{Min}}\right)+240\mathrm{°}& \text{if Max}=B^{\mathrm{\prime }}\end{array}$$

• Adjust negative hue: If H < 0, add 360° to wrap it correctly.

Step 6: Convert HSL to Percentage/Range

• Hue (H) remains in degrees (0°–360°).

• Saturation (S) & Lightness (L) are converted to percentages (0%–100%).

---

Example Conversion

Convert RGB(255, 0, 0) (Pure Red) to HSL:

1. Normalize RGB:

   $$R^{\mathrm{\prime }}=1.0,G^{\mathrm{\prime }}=0.0,B^{\mathrm{\prime }}=0.0$$

2. Find Min & Max:

   $$\text{Min}=0.0,\text{Max}=1.0$$

3. Calculate Lightness (L):

   $$L=\frac{0.0+1.0}{2}=0.5(50\mathrm{\%})$$

4. Calculate Saturation (S):

   $$S=\frac{1.0-0.0}{1.0+0.0}=1.0(100\mathrm{\%})$$

5. Calculate Hue (H):

   $$\text{Max}=R^{\mathrm{\prime }},\text{so:}$$$$H=60\mathrm{°}\times \left(\frac{0.0-0.0}{1.0-0.0}\right)+0\mathrm{°}=0\mathrm{°}$$

6. Final HSL:

   $$\text{HSL}(0\mathrm{°},100\mathrm{\%},50\mathrm{\%})$$