HSL to hex converter
Choose the HSL tab, set hue, saturation and lightness, and read the matching hex code instantly. RGB, HSV and CMYK come along for free, so you always see the full picture.
How HSL becomes hex
HSL and hex describe color in very different ways, so the conversion takes two steps. First HSL is turned into RGB by mapping the hue to a base color and then applying saturation and lightness. Then each RGB channel is written as two base 16 digits to form the hex string. HueKit handles both steps together as you drag the sliders.
Why work in HSL at all
HSL is the model designers reach for when they want to adjust a color rather than define one from scratch. Because hue, saturation and lightness are independent, you can hold a hue steady and simply lower the lightness to get a darker shade that still feels like the same color. That is far more intuitive than editing raw hex digits.
- Fix hue and saturation, step lightness, and you get a clean scale.
- Nudge the hue slightly to warm or cool a whole palette at once.
- Drop saturation for muted, sophisticated neutrals.
When you need the opposite direction, the hex to RGB converter and the full color converter have you covered.
Frequently asked questions
How do I convert HSL to hex?
HSL is first converted to RGB, then each RGB channel is written as two hex digits. HueKit does both steps at once, so moving the hue, saturation or lightness slider updates the hex code live.
What do hue, saturation and lightness mean?
Hue is the position on the color wheel in degrees. Saturation is how vivid the color is, from grey to pure. Lightness is how bright it is, from black through the color to white.
Why is HSL good for building color scales?
Because it separates hue from lightness. Keep the hue and saturation fixed and step the lightness to produce a consistent light to dark scale, which is exactly how design systems build tints and shades.