Enter a HSL colour. Any supported format is accepted, and the result updates as you type.
This box works in both directions — change it and the HSL value follows.
All formats
-
HEX
— -
HEX8
— -
RGB
— -
RGBA
— -
HSL
— -
HSV
— -
CMYK
—
Every value shown comes from one conversion of the colour above, so the HEX, RGB, HSL and CMYK rows always agree with each other.
Your colours are converted in this browser. Nothing is uploaded and nothing is saved.
Turn a hue angle and two percentages into a hex code. This is the direction you need when a design system stores colours as HSL — where changing lightness by ten points is a one-line change — but the output has to be a hex code for a stylesheet or a config file.
The field accepts the full CSS syntax, including hue angles past 360° that wrap around, and hsla() with an alpha value.
How to use this tool
- Paste an hsl() or hsla() value into the top box.
- Read the hex code beside it, or type a hex code and watch the HSL value change instead.
- Use the colour field if you would rather pick visually.
- Copy the hex code, or any of the other formats listed below.
The hsl() syntax, and what is optional
hsl() takes a hue angle and two percentages. The deg unit is optional — hsl(217.5, 91.3%, 63.9%) and hsl(217.5deg, 91.3%, 63.9%) are the same colour. Hue wraps, so 400° is the same as 40° and −30° is the same as 330°.
- hsl(0, 100%, 50%) — red
- hsl(120, 100%, 50%) — green
- hsl(240, 100%, 50%) — blue
- hsl(360, 100%, 50%) — red again, because 360° wraps to 0°
Why some values collapse to black or white
Lightness 0% is black and 100% is white, whatever the hue and saturation say. hsl(210, 100%, 0%) is #000000 and hsl(210, 100%, 100%) is #FFFFFF — the hue is still recorded, but it has nothing left to tint.
Alpha, and what happens to it
An hsla() value carries its own alpha, which becomes the last two digits of an 8-digit hex code. hsla(217.5, 91.3%, 63.9%, 0.5) is #4F8EF77F — valid CSS, and understood by every browser that supports 8-digit hex.
Frequently asked questions
Does CSS accept hsl() without the deg unit?
Yes, and the unit is optional in both places. hsl(217.5, 91.3%, 63.9%) is valid.
What is hsl(0, 0%, 0%)?
Black, #000000. Zero lightness means there is no light to tint, so the hue and saturation are irrelevant.
Why does my HSL value not match the hex code I had?
Almost always because the HSL value was rounded. With whole-number hue and percentages, a channel can shift by up to three steps out of 255. Decimal places keep the match exact.
Can I convert CMYK back to RGB?
Yes, through the colour converter; the arithmetic conversion in this suite inverts exactly, though a print profile does not.