IZN Tools

HEX to HSL Converter

Hue, saturation and lightness — the form you can actually adjust by hand.

#FF5733no CSS keyword
HSLhsl(11, 100%, 60%)
HEX#FF5733
RGBrgb(255, 87, 51)
HSVhsv(11, 80%, 100%)
CMYKcmyk(0%, 66%, 80%, 0%)
Name
Read as HEXCMYK is the naive formula every converter uses — an orientation, not a print specification.
Computed on this device

What HSL buys you

A hex string tells you nothing. #FF5733 and #FF5734 look identical and read as unrelated. In HSL the same colour is hsl(11, 100%, 60%), and now every question has a one-number answer:

  • Lighter? Raise the third number.
  • Less intense? Lower the second.
  • A matching accent? Move the first by 180 for the opposite, or by 30 for a neighbour.

This is why design systems are usually written in HSL and shipped as hex.

The round trip is not exact

HSL here uses whole degrees and whole percents, so 16.7 million RGB values map onto far fewer HSL triples. Convert a hex to HSL and straight back and you can land one step away — invisible on screen, but real if you are comparing strings in a test.

Keep hex as the stored value and treat HSL as the working form.

Questions

Why convert to HSL at all?+

Because HSL is adjustable. Making a colour lighter is one number in HSL and three guesses in hex, which is why design systems are written in HSL and shipped as hex.

Will it convert back exactly?+

Usually, but not always. Whole degrees and percents cannot address all 16.7 million RGB values, so a round trip can land one step away — invisible on screen, real in a test that compares strings.

What is the hue of a grey?+

Undefined, and reported as 0. At zero saturation the hue has no effect at all.