Tools
HSL converter
HSL to HEX and RGB converter
Convert colours from HSL to HEX or RGB and back, with a live preview.
#3b82f659, 130, 2460.2314, 0.5098, 0.9647217, 91%, 60%54.5 8.5 -65.554.5 66.0 277.50.64 -0.01 -0.150.64 0.15 264About this tool
HSL describes a colour with three numbers that are easy to reason about: hue in degrees (0–360), and saturation and lightness as percentages. That makes it handy for building variants, such as a darker hover state or a lighter background, just by moving the lightness. This page turns that HSL into the HEX or RGB your design file or code asks for.
The tool starts with “HSL” selected and the example hsl(8, 100%, 55%). Replace it with your colour, with or without the percent signs, and the HEX and RGB rows appear highlighted at the top of the table. The swatch on the left updates so you can check the shade. To go the other way, pick HEX or RGB under “Format” and read the HSL row.
The maths runs in your browser and nothing is sent anywhere. Results are rounded to whole numbers from 0 to 255 per channel, so an HSL value with decimals may give a hex code that differs by a tenth when converted back. Alpha (hsla) is not supported, nor are angles in other units such as turn or rad.
Frequently asked questions
What do the three HSL values mean?
H is the hue in degrees around the colour wheel (0 red, 120 green, 240 blue), S is saturation and L is lightness, both as percentages. L at 50% gives the purest colour.
How do I darken a colour but keep its hue?
Lower only the L value in HSL, say from 55% to 40%, and convert the result to hex. Hue and saturation stay the same.
Are HSL and HSB/HSV the same thing?
No. They share the hue, but HSB (the one in Photoshop) uses brightness instead of lightness, and 100% brightness does not give white. The values are not interchangeable.
Why don’t two colours with the same L look equally light?
HSL is not perceptually uniform: a yellow and a blue at L 50% look very different. If you need consistent perceived lightness, use OKLCH, which is also shown in the table.