RGB to HSL Color Converter

What is RGB to HSL Conversion?

RGB to HSL conversion is the process of transforming color representations from the RGB (Red, Green, Blue) color model to the HSL (Hue, Saturation, Lightness) color model. This conversion is useful for color manipulation and analysis, as HSL provides a more intuitive representation of color properties.

RGB Color Model

The RGB color model represents colors using three components:

• Red (R): Amount of red, from 0 to 255.
• Green (G): Amount of green, from 0 to 255.
• Blue (B): Amount of blue, from 0 to 255.

HSL Color Model

The HSL color model represents colors using three components:

• Hue (H): The color itself, represented as an angle from 0° to 360°.
• Saturation (S): The intensity of the color, from 0% (gray) to 100% (full color).
• Lightness (L): The brightness of the color, from 0% (black) to 100% (white).

Conversion Formula

The conversion from RGB to HSL involves these steps:

1. Normalize RGB values:

\[ R' = R / 255, G' = G / 255, B' = B / 255 \]

2. Calculate Cmax, Cmin, and Δ:

\[ C_{max} = \max(R', G', B') \]

\[ C_{min} = \min(R', G', B') \]

\[ \Delta = C_{max} - C_{min} \]

3. Calculate Hue:

\[ H = \begin{cases} 0°, & \text{if } \Delta = 0 \\ 60° \times (\frac{G' - B'}{\Delta} \mod 6), & \text{if } C_{max} = R' \\ 60° \times (\frac{B' - R'}{\Delta} + 2), & \text{if } C_{max} = G' \\ 60° \times (\frac{R' - G'}{\Delta} + 4), & \text{if } C_{max} = B' \end{cases} \]

4. Calculate Lightness:

\[ L = \frac{C_{max} + C_{min}}{2} \]

5. Calculate Saturation:

\[ S = \begin{cases} 0, & \text{if } L = 0 \text{ or } L = 1 \\ \frac{\Delta}{1 - |2L - 1|}, & \text{otherwise} \end{cases} \]

Usage Example

Let's convert a vibrant blue color from RGB to HSL:

• RGB: (0, 127, 255)
• HSL: (210°, 100%, 50%)

Visual Representation

This diagram shows the vibrant blue color represented in both RGB and HSL formats. The HSL representation provides a more intuitive understanding of the color's properties.