HSL to RGB converter
Enter hue, saturation and lightness and get RGB values for CSS, code and screen design tools.
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) and lightness (l).
- 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
With S and L as fractions: C = (1 - |2L - 1|) × S, X = C × (1 - |(H / 60) mod 2 - 1|), m = L - C / 2; then (R1, G1, B1) is (C, X, 0), (X, C, 0), (0, C, X), (0, X, C), (X, 0, C) or (C, 0, X) by the 60 degree sector of H, and each channel is (value + m) × 255. Then: The channels are rounded to whole numbers from 0 to 255.
Example
Inputs: Hue (H) = 200 °, Saturation (S) = 50 %, Lightness (L) = 40 %. Result: RGB code: rgb(51, 119, 153); Red (R): 51; Green (G): 119.
Limits and caveats
- RGB channels are rounded to whole numbers, so nearby inputs can give the same result.
- All values are treated as sRGB, the default web color space, not Display P3 or Adobe RGB.
Questions about this tool
Why does hue do nothing at 0% saturation?
At 0% saturation the color is a gray with three equal channels, so H has no effect on the result.
What does 50% lightness mean in HSL?
At 50% the color is at its most vivid for its saturation; moving toward 0% blends it into black and toward 100% into white.
Why are the RGB values whole numbers?
Each channel of a standard 8-bit screen color has 256 levels, 0 to 255, so the result is rounded to the nearest whole number.