NineClip Free Tools

HSL to HEX Converter

Convert an HSL colour — hue, saturation and lightness — into a hex code for CSS and design tools, with a live swatch. Runs in your browser.

Color Tools● Free No upload Instant

Loading HSL to HEX Converter…

Your browser is preparing the tool. It runs 100% locally.

Quick Answer

Enter an HSL colour — a hue in degrees, plus saturation and lightness as percentages — and the tool gives you the matching hex code, with a swatch so you can see it. HSL is easy to reason about (rotate the hue, lighten or darken with the lightness), while hex is what CSS and most design tools expect, so this bridges the two. It is the inverse of the hex-to-HSL converter. It runs entirely in your browser.

What the HSL to HEX Converter Does

Type the three HSL numbers — for example 199, 89, 48 — and you get the hex code for that colour straight away, shown on a live swatch. It is the quick way to turn a colour you have tuned in HSL into the hex value your stylesheet or design app wants.

HSL describes a colour by its hue (its position on the colour wheel), its saturation (how vivid it is) and its lightness (how light or dark). Those are intuitive to adjust by hand; this converter turns the result into the more universally accepted hex form.

How It Works

The tool converts your HSL values to red, green and blue using the standard HSL-to-RGB algorithm, then writes those three channels as a six-digit hex code. The hue wraps around the colour wheel, and the saturation and lightness percentages scale the vividness and brightness.

It is the exact inverse of converting hex to HSL: feed the hex code from this tool back into a hex-to-HSL converter and you get your original HSL values, give or take the tiny rounding that happens when colours are stored as whole-number channels.

Data source & conversion logic

  1. Read the HSL values. Take the hue, saturation and lightness you entered.
  2. Convert to RGB. Apply the standard HSL-to-RGB formula to get red, green and blue.
  3. Write as hex. Express each channel as two hex digits and join them.
  4. Show the swatch. Display the hex code and a live colour preview.

HSL to hex

1. read HSL — hue 0-360, saturation and lightness 0-100% 2. convert to RGB — each channel 0-255 3. write RGB as a six-digit hex code
Worked example
HSL 199, 89%, 48% → RGB 13, 162, 231 → hex #0DA2E7

The inverse of hex-to-HSL; a tiny rounding can occur because hex stores whole-number channels.

Technical Details

InputHSL (hue 0-360, saturation and lightness 0-100%)
Outputsix-digit hex code (uppercase)
Methodstandard HSL-to-RGB then RGB-to-hex
Swatchlive colour preview
Inverse ofthe hex-to-HSL converter
Where it runsIn your browser — nothing uploaded

Standards & references

  • HSL colour model — describes a colour by hue (an angle on the colour wheel, 0-360), saturation (0-100%) and lightness (0-100%); it is part of the CSS colour specification and is intuitive for adjusting colours.
  • Hex notation — a six-digit hex code writes the red, green and blue channels as two hex digits each (00 to FF); it is the most widely accepted colour format in CSS and design tools.
  • Inverse conversion — this is the reverse of hex-to-HSL; converting back and forth returns the same colour, within the small rounding of whole-number channels.

Accuracy & Limitations

It uses the standard HSL-to-RGB conversion, so the result matches CSS and other tools. The hex is the exact colour for your HSL values, shown on the swatch.

A tiny rounding can occur. Hex stores each channel as a whole number from 0 to 255, so converting HSL to hex and back may shift a value by one, which is invisible to the eye.

Hue wraps around the wheel. A hue of 360 is the same as 0 (red), and values beyond the usual range are interpreted around the circle, so the colour stays valid.

Saturation and lightness are percentages. At 0% saturation the colour is a grey set by the lightness; at 0% or 100% lightness it is black or white regardless of hue.

It converts colour values, not appearance. The same hex can look slightly different on different screens because of their colour calibration; the conversion itself is exact.

Real-World Use Cases

HSL to CSS hex

Turn an HSL colour you tuned into the hex your stylesheet wants.

Design hand-off

Give developers a hex code from an HSL value.

Adjusting then exporting

Shift hue or lightness in HSL, then get the hex.

Learning colour formats

See how an HSL colour maps to its hex code.

When to use it — and when not to

Good for

  • Converting HSL to a hex code
  • Getting CSS-ready hex from HSL
  • Exporting a colour tuned in HSL
  • Seeing the colour on a swatch

Not the best choice for

  • Colours with transparency (alpha)
  • Wide-gamut or non-sRGB colours
  • Perceptual adjustments (use OKLCH)
  • Bulk conversion of many colours

Going the other way? Use the hex-to-HSL converter. Need transparency? Use an HSLA-to-hex tool that includes the alpha channel. Want perceptual lightness control? An OKLCH tool is better suited.

Frequently Asked Questions

What is HSL?
A way of describing a colour by hue (its position on the colour wheel, 0 to 360 degrees), saturation (how vivid, 0 to 100%) and lightness (how light or dark, 0 to 100%). It is intuitive for adjusting colours by hand.
Why convert HSL to hex?
Because hex is the format most CSS and design tools expect, while HSL is easier to tune. You adjust the colour in HSL, then convert to the hex your stylesheet or app needs.
How do I enter the values?
As three numbers — the hue in degrees and the saturation and lightness as percentages — for example 199, 89, 48. The tool reads the numbers and converts them.
Is the conversion exact?
Yes, within rounding. Hex stores each colour channel as a whole number, so converting to hex and back to HSL can shift a value by one, which the eye cannot see.
What happens at 0% saturation?
The colour becomes a shade of grey set purely by the lightness, because saturation controls how much colour there is. The hue no longer affects the result.
What about 0% or 100% lightness?
0% lightness is black and 100% is white, whatever the hue and saturation. Lightness sets how light or dark the colour is overall.
Can a hue be more than 360?
The hue wraps around the wheel, so 360 is the same as 0 (red) and larger numbers loop around. The colour stays valid either way.
Is this the reverse of hex-to-HSL?
Yes. It undoes that conversion, so a hex from here fed into a hex-to-HSL converter returns your original HSL values, within the small rounding of whole-number channels.
Does it support transparency?
No. It converts the solid colour. For transparency you would use an HSLA value, which adds an alpha channel, and a tool that outputs an eight-digit hex.
Why does my colour look different on another screen?
Screens vary in calibration, so the same hex can appear slightly different. The conversion is exact; the display is what varies.
Can I convert many colours at once?
It converts one at a time. For a batch, a script or a spreadsheet with a colour function would be quicker.
Is anything uploaded?
No. The conversion happens entirely in your browser; nothing is sent anywhere.

References

Converts HSL (hue 0-360, saturation and lightness 0-100%) to a hex code using the standard HSL-to-RGB algorithm; it is the inverse of the hex-to-HSL converter and is explicit that a one-step rounding can occur because hex stores whole-number channels, and that it handles solid (non-transparent) colours.

PopularHot

Color Picker

Use Color Picker to choose and convert color precisely — instant and free.

ColorOpen Tool
Popular

HEX to RGB Converter

Use HEX to RGB Converter to choose and convert color precisely — instant and free.

ColorOpen Tool
Trending

Color Palette Generator

Use Color Palette Generator to choose and convert color precisely — instant and free.

ColorOpen Tool
Trending

Gradient Generator

Use Gradient Generator to choose and convert color precisely — instant and free.

ColorOpen Tool
Editor's Pick

Contrast Checker

Use Contrast Checker to choose and convert color precisely — instant and free.

ColorOpen Tool

RGB to HEX Converter

RGB to HEX Converter with copy-ready values for design and front-end work.

ColorOpen Tool

Ready to try the HSL to HEX Converter?

It is free, private and runs entirely in your browser — no sign-up, no uploads, no limits.

Use the tool now Explore Color Tools