HSL to RGBA Converter

Foreground Color

Output Color

Loading… Please Wait

About HSL to RGBA Converter

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

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

Why Convert HSL to RGBA?

Converting HSL to RGBA is useful when you need to define colors in terms of their hue, saturation, and lightness along with opacity. RGBA is often used in digital design and web development for its straightforward representation of color and transparency.

How to Convert HSL to RGBA

To convert HSL to RGBA, you need to transform the hue, saturation, and lightness components into red, green, and blue values, and then include the alpha component.

Extract the values for Hue (H), Saturation (S), Lightness (L), and Alpha (A) from the HSL code.
- Example: hsl(320deg, 60%, 50%) gives H = 320, S = 60%, L = 50%.
Convert the Saturation (S) and Lightness (L) values to a range of 0 to 1 by dividing by 100.
- 𝑆 = 60% / 100 = 0.6
- L = 50% / 100 = 0.5
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.5 – 1∣) × 0.6 = 0.6
- X = 0.6 × (1 – ∣(320 / 60) % 2 – 1∣) = 0.4
- m = 0.5 – (0.6 / 2) = 0.2
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 = 320, (𝑅, 𝐺, 𝐵) = (0.6 + 0.2, 0.2, 0.4 + 0.2) = (0.8, 0.2, 0.6)
Convert the RGB values to a scale of 0 to 255.
- 𝑅 = 0.8 × 255 ≈ 204
- 𝐺 = 0.2 × 255 ≈ 51
- 𝐵 = 0.6 × 255 ≈ 153
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 with the Alpha (A) value to form the RGBA value.
- Example: rgba(204, 51, 153, 0.5)