How HSL to HEX Converter works
HSL describes a colour the way a person thinks about one: which colour it is, how vivid it is, and how light or dark it is. HEX describes the same colour the way a machine stores it. This converter moves from the first to the second, so you can reason in hue, saturation and lightness while still producing the six-digit code a stylesheet, design file or brand document expects. Alongside the conversion it generates a full lightness scale at your chosen hue, which is the fastest way to derive the hover, active and disabled variants of a colour you have just settled on.
Why HSL is easier to reason about than HEX
The three HSL numbers each control something a person can name, and that is the whole advantage. Hue is a position in degrees around the colour wheel, so 0 and 360 are both red, 120 is green and 240 is blue. Saturation runs from 0%, which is grey regardless of the hue, to 100%, which is the most vivid form of that hue available. Lightness runs from 0% black through 50%, where the hue appears at full strength, up to 100% white — which means both extremes discard the colour entirely, and a common mistake is expecting 100% lightness to give a bright vivid colour rather than plain white. Because the three properties are independent, adjusting one leaves the others intact: making a colour lighter is a single-number change. In HEX the same adjustment alters all six digits at once with no visible relationship to the original, which is why deriving a palette by hand in HEX is so much harder than it needs to be.
Where HSL's model breaks down
HSL is far more intuitive than HEX, but it is not perceptually uniform, and knowing where it misleads you saves real time. Two colours with identical lightness values can look dramatically different in brightness to the human eye: hsl(60, 100%, 50%) is a glaring yellow while hsl(240, 100%, 50%) is a deep blue that reads as much darker, even though both claim 50% lightness. This is because HSL is a straightforward mathematical transformation of RGB and takes no account of the eye's very uneven sensitivity across the spectrum — we are far more sensitive to green and yellow than to blue. The practical consequence is that a palette built by holding lightness constant across several hues will not look evenly weighted, and text contrast cannot be predicted from the lightness number alone. Newer CSS colour spaces exist precisely to fix this: OKLCH uses the same intuitive lightness-chroma-hue structure but is perceptually uniform, so equal lightness values genuinely look equally light.
Using HSL to HEX Converter
- 1
Set the hue slider to the colour you want — 0 is red, 120 green, 240 blue.
- 2
Adjust saturation for how vivid the colour should be, from grey at 0% to fully saturated at 100%.
- 3
Adjust lightness, where 50% gives the purest form of the hue.
- 4
Copy the HEX value, or take the lightness scale below it as a ready-made set of variants.
When you would reach for this
Building a colour scale from one brand colour
Holding hue and saturation steady while stepping lightness produces a coherent palette, which is exactly how design system scales are built.
Deriving hover and active states
Adjusting lightness by ten points in either direction gives a state variant that unmistakably belongs to the same colour.
Converting a design tool value for CSS
Design software often reports HSL while brand guidelines specify HEX; this closes the gap without a round trip through another app.
Picking accessible text on a background
The readable-text result shows whether black or white gives better contrast, along with the exact ratio.
A few pointers
- Keep hue and saturation fixed and vary only lightness to generate a palette that reads as one family.
- 50% lightness is the purest form of a hue; both 0% and 100% discard the colour entirely.
- Always verify contrast with an actual ratio rather than inferring it from lightness, since HSL lightness does not track perceived brightness.