What is an HSL to HEX converter?
An HSL to HEX converter changes a color described by hue, saturation, and lightness into three hexadecimal RGB channel pairs. The result is a compact six-digit color commonly used in CSS and design tokens.
How to convert HSL to HEX
- Enter a value such as
hsl(10.6 100% 60%)or10.6, 100%, 60%. - Check the preview and the intermediate red, green, and blue channels.
- Copy an uppercase, lowercase, or shorthand HEX value when available.
Hue accepts a number with an optional deg suffix. Saturation and lightness must be percentages from 0% to 100%.
HSL to HEX example
The HSL color hsl(10.6 100% 60%) converts to RGB 255, 87, 51. Each RGB channel then becomes a two-digit hexadecimal pair:
255, 87, 51 → FF, 57, 33 → #FF5733RGB channels are rounded to the nearest integer before the HEX code is created.
Hue wrapping and HSL boundaries
Hue repeats every 360 degrees, so 30deg, 390deg, and -330deg describe the same hue. At 0% saturation the result is gray. At 0% lightness it is black, and at 100% lightness it is white.
HSL vs. HEX
HSL is convenient while adjusting hue, intensity, or lightness. HEX is shorter for storing the finished sRGB color. Six-digit HEX has no alpha channel.
Use the HEX to HSL Converter for the reverse direction, or HSL to RGB Converter when decimal channels are required.
HSL to HEX FAQ
Must saturation and lightness include percent signs?
Yes. Percent signs make the HSL input unambiguous.
Can hue be outside 0 to 360?
Yes. It is wrapped around the color wheel before conversion.
Why can conversion require rounding?
HSL calculations can produce fractional RGB channels, while six-digit HEX stores integer channels from 00 to FF.
When can HEX be shortened?
Only when each channel pair repeats one digit, such as #AABBCC, which becomes #ABC.
Why is hsla() rejected?
HSLA includes transparency. Six-digit HEX cannot preserve it, so this converter does not remove alpha silently.