HSLA to RGB Converter

Foreground Color

Output Color

Loading… Please Wait

About HSLA to RGB Converter

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

Additionally, we can even specify a background color in RGBA format. Diversify India’s HSLA to RGB converter will mix these foreground and background colors to get the resultant RGB color.

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

Why Convert HSLA to RGB?

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

How to Convert HSLA to RGB

To convert HSLA to RGB, you need to transform the hue, saturation, and lightness components into red, green, and blue components, and also include the alpha (A) component.

Extract the values for Hue (H), Saturation (S), Lightness (L), and Alpha (A) from the HSLA code.
- Example: hsla(20deg, 50%, 30%, 0.5) gives H = 20, S = 50%, L = 30%.
Convert the Saturation (S) and Lightness (L) values to a range of 0 to 1 by dividing by 100.
- 𝑆 = 50% / 100 = 0.5
- L = 30% / 100 = 0.3
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.3 – 1∣) × 0.5 = 0.3
- X = 0.3 × (1 – ∣(20 / 60) % 2 – 1∣) = 0.1
- m = 0.3 – (0.3 / 2) = 0.15
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 = 20, (𝑅, 𝐺, 𝐵) = (0.3 + 0.15, 0.1 + 0.15, 0.15) = (0.45, 0.25, 0.15)
Convert the RGB values to a scale of 0 to 255.
- 𝑅 = 0.45 × 255 ≈ 115
- 𝐺 = 0.25 × 255 ≈ 64
- 𝐵 = 0.15 × 255 ≈ 38
Combine the RGB values:
- Example: rgb(115, 64, 38)