Loading Techie Utils…

HSL to HEX Color Converter

Convert an hsl() colour to hex, with every other CSS colour format alongside. Free, and runs entirely in your browser — nothing is uploaded.

About Color Converter

One colour, expressed every way you might need it: hex for CSS and design tools, RGB for canvas and image code, HSL for reasoning about lightness and saturation, HSV for colour pickers, CMYK as a rough guide for print, and the CSS Color 4 notations — HWB, LAB, LCH, Oklab and OKLCH — that browsers have supported since 2023.

OKLCH is the one worth learning, and the rows make the case better than an explanation can. Take any saturated blue and a yellow of the same HSL lightness: HSL calls them both 50% and the eye does not agree, because HSL's lightness is a property of the numbers rather than of the light. OKLCH's L is perceptual, so two colours with the same L genuinely look equally light — which is what makes a tonal scale in OKLCH come out even, and a scale in HSL come out lumpy in the yellows.

LAB is the same idea from 1976 and is still what print colour management uses. It has two known faults that Oklab was built to fix: blues rotate towards purple as they lighten, and lightness is a little off around the blue corner. Both are visible when interpolating, which is why a gradient through Oklab looks right and the same gradient through LAB often does not.

One detail that surprises people: lab() and lch() are defined at the D50 white point, while oklab(), oklch() and sRGB itself are at D65. Computing LAB against D65 — which is what most textbook code does — gives numbers that disagree with the browser's. These are the browser's.

The typed field takes any of those notations as input, not only as output. It is parsed here rather than handed to a canvas, so a colour outside sRGB is reported as outside sRGB instead of being silently clipped and shown as something else.

Where it helps

  • Every notation from one input: the four classic ones plus HWB, LAB, LCH, Oklab and OKLCH.
  • LAB and LCH are computed at D50, matching what a browser prints rather than what textbook D65 code produces.
  • Takes any of those notations as input too, parsed directly rather than through a canvas.
  • Says when a lab() or oklch() colour is outside sRGB instead of quietly clipping it.
  • OKLCH output makes an even tonal scale arithmetic rather than guesswork.
  • Runs locally — no palette service involved.

Limits

  • CMYK conversion is a naive formula, not a colour-managed one; real print needs an ICC profile from your printer.
  • Everything is converted to and from sRGB, so a P3 or Rec. 2020 colour is shown as its nearest sRGB neighbour.
  • Out-of-gamut colours are clipped per channel rather than gamut-mapped the way CSS Color 4 specifies, so a very saturated LAB colour comes back slightly more shifted than a browser would render it.
  • Alpha is carried through the modern notations but not through CMYK or HSV, which have nowhere to put it.
  • It reports the colour, not whether it is legible; contrast is the Contrast Checker's job.

Frequently asked questions

What is OKLCH, and why would I use it over HSL?

Lightness, chroma and hue, where lightness means what the eye means by it. In HSL, hsl(60 100% 50%) (yellow) and hsl(240 100% 50%) (blue) claim the same lightness and look nothing alike. In OKLCH the same L genuinely reads as the same lightness, so a tonal scale built by stepping L comes out even across every hue — which is why design systems have moved to it.

Why do my LAB numbers not match the ones here?

Almost certainly the white point. CSS defines lab() and lch() at D50, following the ICC print convention, while most sample code computes CIE Lab at D65 — sRGB's own white. Red is lab(54.29% 80.8 69.89) in a browser and lab(53.24 80.09 67.2) against D65. These values are the browser's.

What does it mean that a colour is outside sRGB?

LAB and OKLCH can name any colour a human can see, and an ordinary screen shows perhaps a third of those. When a value falls outside, what you see is the nearest colour the display can reach — the same thing a browser does, except that it does it silently. A wide-gamut screen reaches more of them.

Can I trust the CMYK numbers for print?

Treat them as an approximation. Accurate conversion depends on the paper, ink and profile, which only your printer can supply — and for that, LAB rather than CMYK is what a printer will ask you for.

When should I use HWB?

When you are tinting and shading by hand. It is the same sRGB cube as HSL in a friendlier parameterisation — a pure hue with percentages of white and black mixed in — which is exactly how a tint or a shade of a brand colour gets described in a design review.

Related tools

More Colors & Design tools