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.
#c0392b #1dd1a1 #54a0ff
hsl(6, 63%, 46%) hsl(164, 76%, 47%) hsl(213, 100%, 66%)
Try it with your own data
Frequently Asked Questions
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.
How to convert HEX to HSL
- Convert the hex code to RGB channel values.
- Normalize each channel to the 0–1 range.
- 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.