HSV (HSB) to HSL converter
Enter hue, saturation and value (brightness) and get HSL values, which make lighter and darker shades easy to build in CSS.
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 value, brightness (v).
- 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
Hue H is unchanged; with S and V as fractions, L = V × (1 - S / 2) and HSL saturation = (V - L) / min(L, 1 - L), or 0 when L is 0 or 1.
Example
Inputs: Hue (H) = 200 °, Saturation (S) = 60 %, Value, brightness (V) = 80 %. Result: HSL code: hsl(200, 54.5%, 56%); Hue (H): 200 °; Saturation (S): 54.5 %.
Limits and caveats
- Values in the code are rounded to one decimal, so converting back can shift an RGB channel by 1.
- All values are treated as sRGB, the default web color space, not Display P3 or Adobe RGB.
Questions about this tool
Why does saturation change when converting to HSL?
The two models measure saturation against different references, so hsv(200, 60%, 80%) becomes hsl(200, 54.5%, 56%).
Where do I find HSV values in design apps?
The Photoshop color picker shows H, S and B fields, and Figma lets you pick HSB from its color format menu.
Can I paste the HSL result straight into CSS?
Yes. The hsl() function works in every current browser, and the CSS line in the results is ready to copy as it is.