HSL to RGB Converter

Foreground Color

Output Color

Loading… Please Wait

About HSL to RGB Converter

Input an HSL value like hsl(180deg, 100%, 50%) and Diversify India’s HSL to RGB converter will convert this value to an RGB color like rgb(0, 255, 255).

HSL color parameters are hue, saturation, and lightness. The output RGB color parameters are red, green, and blue.

Why Convert HSL to RGB?

Converting HSL to RGB is useful because RGB is the standard color model for digital screens and most image processing tasks. The HSL color model represents colors in terms of hue, saturation, and lightness, which can simplify color adjustments and manipulations in design applications. Converting HSL to RGB allows for compatibility with a wider range of digital applications.

How to Convert HSL to RGB

To convert HSL to RGB, you need to transform the hue, saturation, and lightness components into red, green, and blue components.

Extract the values for Hue (H), Saturation (S), Lightness (L), and Alpha (A) from the HSL code.
- Example: hsl(330deg, 70%, 40%) gives H = 330, S = 70%, L = 40%.
Convert the Saturation (S) and Lightness (L) values to a range of 0 to 1 by dividing by 100.
- 𝑆 = 70% / 100 = 0.7
- L = 40% / 100 = 0.4
Calculate the intermediate values for chroma (C), X, and m.
- Chroma 𝐶 = (1 – ∣2𝐿 – 1∣) × S
- X = 𝐶 × (1 – ∣(𝐻 / 60) % 2 – 1∣)
- m = 𝐿 – (𝐶 / 2)
Example Calculation:
- C = (1 – ∣2 × 0.4 – 1∣) × 0.7 = 0.56
- X = 0.56 × (1 – ∣(330 / 60) % 2 – 1∣) = 0.28
- m = 0.4 – (0.56 / 2) = 0.12
Calculate the Red (R), Green (G), and Blue (B) values based on the Hue (H) range.
- For 0 ≤ 𝐻 <60: (𝑅, 𝐺, 𝐵) = (𝐶 + 𝑚, 𝑋 + 𝑚, 𝑚)
- For 60 ≤ 𝐻 < 120: (𝑅, 𝐺, 𝐵) = (𝑋 + 𝑚, 𝐶 + 𝑚, 𝑚)
- For 120 ≤ 𝐻 <180: (𝑅, 𝐺, 𝐵) = (𝑚, 𝐶 + 𝑚, 𝑋 + 𝑚)
- For 180 ≤ 𝐻 < 240: (𝑅, 𝐺, 𝐵) = (𝑚, 𝑋 + 𝑚, 𝐶 + 𝑚)
- For 240 ≤ 𝐻 < 300: (𝑅, 𝐺, 𝐵) = (𝑋 + 𝑚, 𝑚, 𝐶 + 𝑚)
- For 300 ≤ 𝐻 < 360: (𝑅, 𝐺, 𝐵) = (𝐶 + 𝑚, 𝑚, 𝑋 + 𝑚)
- Example: Since H = 330, (𝑅, 𝐺, 𝐵) = (0.56 + 0.12, 0.12, 0.28 + 0.12) = (0.68, 0.12, 0.4)
Convert the RGB values to a scale of 0 to 255.
- 𝑅 = 0.68 × 255 ≈ 173
- 𝐺 = 0.12 × 255 ≈ 31
- 𝐵 = 0.4 × 255 ≈ 102
The Alpha value spans from 0 (fully transparent) to 1 (fully opaque). You can choose the desired alpha value based on the transparency needed.
- Example: Adding an alpha value of 0.5 for 50% transparency.
Combine the RGB values.
- Example: rgb(173, 31, 102)