ToolWox
Log inSign up

HSL to HEX Converter

HSL to HEX Converter turns hue, saturation and lightness values into a hexadecimal color code ready for CSS or a design tool. It also shows the RGB equivalent and a live swatch.

Enter the three HSL channels and the matching HEX value appears instantly.

HSLhsl(262, 83%, 58%)
HEX#7c3bed
RGBrgb(124, 59, 237)

How to use HSL to HEX Converter

  1. 1

    Enter HSL values

    Set hue (0–360), saturation (0–100%) and lightness (0–100%).

  2. 2

    Read the HEX code

    The matching #rrggbb value updates live, with RGB shown too.

  3. 3

    Copy the HEX code

    Paste it straight into your stylesheet or design file.

From HSL back to HEX

HSL is great for choosing and adjusting a color, but most code and design tools store colors as HEX. This converter closes that loop, turning a hue/saturation/lightness triple back into a compact hexadecimal code.

The result is the exact sRGB color your HSL values describe, rounded to the nearest representable 8-bit-per-channel value.

A practical workflow

Dial in a color using HSL — pick a hue, then set saturation and lightness until it looks right — and convert to HEX for the final value you commit to your codebase.

Because HEX and HSL describe the same color space, you can move back and forth freely as your workflow demands.

Frequently asked questions

What ranges do the HSL channels use?
Hue is 0–360 degrees, and both saturation and lightness are percentages from 0 to 100.
Will the HEX exactly match my HSL?
It matches to the nearest 8-bit-per-channel color, which is the precision HEX supports. The round trip is visually identical.

Last updated: