Hex is a storage format. It packs three or four channel bytes into a short string that is easy to paste into a stylesheet, a config file or a chat message, but it tells you almost nothing about the colour it encodes. HSL is a working format. It tells you where the colour sits on the wheel, how pure it is and how light it is, which is what you need when you are building a variant rather than repeating one.
The conversion is arithmetic, so it runs entirely on your device. Nothing is uploaded, no request is made and there is no limit on how many codes you push through, which also means an unreleased brand palette stays on your machine.
Why convert hex to HSL at all
Hex codes are opaque to human reading. Given #3b82f6 and #2563eb, almost nobody can say from the digits alone that the second is the same hue at a lower lightness. Convert both to HSL and the relationship is immediately obvious, which is why design systems that need consistent tints and shades tend to express their palette in HSL even when the source of truth is a hex value from a brand guideline.
The second common reason is editing. Once a colour is in HSL you can build the whole family from it by changing one number at a time, and every derived colour stays visibly related to the original.
- Turning a hex brand colour into a base you can build tints and shades from.
- Working out whether two hex codes in an inherited stylesheet are actually the same hue.
- Reading the alpha out of an 8 digit hex code as a percentage instead of a hex pair.
- Spacing chart or tag colours evenly around the wheel starting from one approved hex value.
- Filing a bug report that describes a colour in words rather than in hexadecimal.
Every hex form this converter accepts
CSS defines four hex lengths and this tool handles all of them. Six digits is the familiar red, green and blue pair form. Three digits is the shorthand where each digit is doubled, so #0af expands to #00aaff. Eight digits appends an alpha pair, and four digits is the shorthand version of that.
Digit doubling is a genuine expansion rule and not an approximation, which is why #fff is exactly white and not a near white. It also explains why the shorthand can only express 4096 colours: only 16 values per channel are reachable.
The hash prefix is optional here, and case does not matter. Anything that is not a valid hex string of one of those four lengths is rejected with a message rather than silently producing black, because silently producing black is how a broken colour ships to production.
Reading the numbers this hex to HSL converter returns
Hue arrives as an angle from 0 to 359 degrees. Red sits at 0, yellow near 60, green at 120, cyan at 180, blue at 240 and magenta at 300. Two colours that share a hue angle are the same colour family regardless of how light or how washed out they are.
Saturation is the percentage distance from grey. Anything under about 15 percent reads as a tinted neutral rather than a colour, which is exactly what you want for surfaces and borders. Anything above 90 percent tends to look aggressive on a large area and is usually reserved for small accents.
Lightness runs from 0 for black to 100 for white. Be careful with it: it is a coordinate in the colour solid, not perceived brightness, so a yellow and a blue at the same lightness number will not look equally bright. If you need equal perceived steps, OKLCH is the model that provides them.
Handling an 8 digit hex with alpha
When the code carries an alpha pair, that byte is divided by 255 to give the fraction CSS expects. The tool reports it both as a percentage and as a decimal, because different codebases prefer different forms, and writes the modern slash separated notation such as hsl(217 91% 60% / 50%).
Two common mistakes are worth naming. First, an 8 digit hex with alpha is not supported by every legacy tool, so if a colour disappears entirely after a paste, check whether the target understood the last two digits. Second, alpha is not the same as lightness. A half transparent black over a white page looks like a mid grey, but it is not a grey, and it will look completely different over a dark background.
Turning the result into a hex colour code to hsl css variable
The most useful output for a design system is a custom property rather than a bare value. Storing the three HSL components separately, as in --brand-h: 217, lets you build a whole scale by composing them, for example hsl(var(--brand-h) var(--brand-s) 92%) for a tinted background that automatically follows the brand hue.
That composition pattern is why teams convert hex to hsl once at the top of a project and never go back. The hex code stays in the brand document, the HSL components live in the stylesheet, and every derived surface, border and hover state is expressed as an offset from them.
| Digits | Example | Encodes |
|---|---|---|
| 3 | #0af | Shorthand RGB, each digit doubled |
| 4 | #0af8 | Shorthand RGB plus alpha |
| 6 | #00aaff | Full 8 bit red, green and blue |
| 8 | #00aaff88 | Full RGB plus an 8 bit alpha byte |
How to convert hex to HSL
- 1
Paste your hex code
Enter a 3, 4, 6 or 8 digit hex value. The leading hash is optional and upper or lower case both work.
- 2
Or pick a colour visually
Use the native colour input beside the field if you would rather choose the colour by eye than type a code.
- 3
Read the HSL values
Hue in degrees, saturation and lightness as percentages, plus alpha when the code included it, appear beside the swatch.
- 4
Copy the form you need
Take the modern space separated notation, the legacy comma form or the custom property declaration.
Related tools worth bookmarking
Sources and further reading
Frequently asked questions
Common questions about the hex to hsl converter.
It expands each digit by doubling it, exactly as the CSS specification requires, so #0af becomes #00aaff before any conversion happens. That is an exact expansion rather than an approximation, which is why the shorthand and the long form always produce identical HSL output.
When the red, green and blue channels are all equal the colour has no position on the hue wheel, so both hue and saturation are reported as zero by convention. Any hue angle would be equally valid for a neutral, and zero is what CSS serialises.
The maths is reversible, but the displayed HSL values are rounded to whole degrees and whole percentages. Round tripping through those rounded numbers can move a channel by one or two units out of 255, which is invisible on any display but will show up in a text diff.
Not into this tool, which expects hexadecimal digits so it can validate them strictly. Use the colour picker beside the field to select the shade you want, or look the name up in a named colour reference and paste its hex equivalent instead.
For derived values, yes, because you can build tints, shades and hover states by changing one component. For fixed brand colours hex remains a fine storage format. Most teams keep hex in the brand document and HSL components in the stylesheet.
Completely. The entire conversion runs as JavaScript inside your browser tab with no network request of any kind, so an unannounced palette or a client brand colour never leaves the machine you typed it on.