HSL to RGB Color Converter

What is HSL to RGB Conversion?

HSL to RGB conversion is the process of transforming color representations from the HSL (Hue, Saturation, Lightness) color model to the RGB (Red, Green, Blue) color model. This conversion is useful when you need to translate intuitive color descriptions into values that can be used in digital displays and image processing.

HSL Color Model

The HSL color model represents colors using three components:

• Hue (H): Represents the color itself, measured in degrees from 0° to 360°.
• Saturation (S): Represents the intensity of the color, from 0% (gray) to 100% (full color).
• Lightness (L): Represents the brightness, from 0% (black) to 100% (white).

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.

Conversion Formula

The conversion from HSL to RGB involves several steps and cases. Here's a simplified version of the formula:

First, calculate some intermediate values:

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

\[ X = C \times (1 - |(H / 60°) \bmod 2 - 1|) \]

\[ m = L - C/2 \]

Then, based on the Hue value, assign RGB values:

• If 0° ≤ H < 60°: (R,G,B) = (C,X,0)
• If 60° ≤ H < 120°: (R,G,B) = (X,C,0)
• If 120° ≤ H < 180°: (R,G,B) = (0,C,X)
• If 180° ≤ H < 240°: (R,G,B) = (0,X,C)
• If 240° ≤ H < 300°: (R,G,B) = (X,0,C)
• If 300° ≤ H < 360°: (R,G,B) = (C,0,X)

Finally, adjust the RGB values:

\[ (R,G,B) = ((R+m) \times 255, (G+m) \times 255, (B+m) \times 255) \]

Usage Example

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

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

Visual Representation

This diagram shows the vibrant blue color represented in both HSL and RGB formats. The visual appearance is identical, demonstrating the accurate conversion between the two color models.