Convert HSL to HEX
Designed a color in HSL and need it as hex for CSS or a design token? This converter resolves hue, saturation, and lightness back into red, green, and blue, then formats the result as a six-digit hex code.
hsl(6, 63%, 46%) hsl(164, 76%, 47%) hsl(213, 100%, 66%)
#bf3a2b #1dd3a2 #52a0ff
Try it with your own data
How to convert HSL to HEX
- Take your HSL value, e.g. hsl(6, 63%, 46%).
- Convert hue, saturation, and lightness back to RGB channels.
- Format each channel as two hex digits — here that lands on #bf3a2b, one step off the original due to HSL rounding.
Frequently asked questions
Does HSL to hex round-trip exactly?
Usually within one digit. Because HSL components are often rounded, converting back can land a single step off the original hex — visually identical, numerically close.
Can I include alpha?
Standard hex output is six digits with no alpha. For transparency, keep the color in hsla() or append an alpha pair as #rrggbbaa.
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.