HSLA to RGBA Converter

Foreground Color

Output Color

Loading… Please Wait

About HSLA to RGBA Converter

Input an HSLA value like hsla(180deg, 100%, 50%, 0.5) and HSLA to RGBA converter will convert this value to an RGBA color like rgba(0, 255, 255, 0.5).

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

Why Convert HSLA to RGBA?

Converting HSLA to RGBA is useful when you need to translate colors defined by hue, saturation, and lightness into their red, green, and blue components with an alpha channel. The RGBA format is widely used in web design and digital graphics for its ability to represent colors with transparency, allowing for more nuanced and dynamic visual effects.

How to Convert HSLA to RGBA

To convert HSLA 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 HSLA code.
- Example: hsla(120deg, 60%, 50%, 0.5) gives H = 120, S = 60%, L = 50%, A = 0.5.
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 – ∣(120 / 60) % 2 – 1∣) = 0
- 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 = 120, (𝑅, 𝐺, 𝐵) = (0.2, 0.6 + 0.2, 0 + 0.2) = (0.2, 0.8, 0.2)
Convert the RGB values to a scale of 0 to 255.
- 𝑅 = 0.2 × 255 ≈ 51
- 𝐺 = 0.8 × 255 ≈ 204
- 𝐵 = 0.2 × 255 ≈ 51
Combine the RGB values with the Alpha (A) value to form the RGBA value.
- Example: rgba(51, 204, 51, 0.5)