devkult_
tools26converters34
home/convert/hex-to-hsl

Convert HEX to HSL

HSL describes color the way humans think about it — hue, saturation, and lightness — which makes it ideal for building tints, shades, and accessible palettes. This converter turns a hex code into its HSL components.

Example · HEX → HSL
HEX input
#c0392b
#1dd1a1
#54a0ff
HSL output
hsl(6, 63%, 46%)
hsl(164, 76%, 47%)
hsl(213, 100%, 66%)

Try it with your own data

RGBrgb(192, 57, 43)
Hex#C0392B
5.44: 1
PASSWCAG AA (4.5:1)
FAILWCAG AAA (7:1)

How to convert HEX to HSL

  1. Convert the hex code to RGB channel values.
  2. Normalize each channel to the 0–1 range.
  3. Derive hue, saturation, and lightness to get hsl(6, 63%, 46%) from #c0392b.

Frequently asked questions

Why use HSL over hex?

HSL makes it easy to create related colors: keep the hue, change lightness for tints and shades, or change saturation for muted variants — all without guessing hex digits.

Is the conversion exact?

Hue, saturation, and lightness are rounded to whole numbers for readability, which can introduce a tiny rounding difference when converting back.

What is WCAG?

The Web Content Accessibility Guidelines (WCAG) define how to make web content more accessible to people with disabilities. Contrast ratios are a key part of these guidelines to ensure text is readable against its background.

What contrast ratio should I aim for?

Level AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text. Level AAA requires at least 7:1 for normal text and 4.5:1 for large text.

Related converters