HSL to HSLA converter
Enter hue, saturation, lightness and alpha to get every common CSS form of the semi-transparent color.
Loading the tool…
Processing and privacy: The result is calculated inside your browser and your data is not sent to any server.
How to use it
- Enter hue h, saturation s, lightness l and alpha.
- The result appears straight away and updates as you edit.
- Copy the result, or copy a link that keeps the same values to share it.
How it is calculated
HSL to RGB per CSS Color 4: a = S × min(L, 1 − L), channel = L − a × max(−1, min(k − 3, 9 − k, 1)) with k = (n + H ÷ 30) mod 12 for n = 0, 8, 4. Alpha becomes the byte round(alpha × 255).
Example
Inputs: Hue H = 210 deg, Saturation S = 50 %, Lightness L = 40 %, Alpha = 0.8 0 to 1. Result: CSS hsla(): hsla(210, 50%, 40%, 0.8).
Limits and caveats
- The HEX and rgba() values are rounded to whole numbers, so they can differ by one step from the exact math.
Questions about this tool
What is the difference between hsl() and hsla()?
hsla() adds alpha. In modern CSS, hsl() also takes alpha after a slash.
Is alpha a percent or 0 to 1?
CSS accepts both; this tool uses 0 to 1, so 0.8 equals 80%.
Does alpha change hue or lightness?
No. Alpha only controls how much of the background shows through.