Emitting a design-token colour
Choose the colour in HSL, then convert to hex for the token file or stylesheet that consumes it.
Use HSL to Hex
Converts hsl colour to hex in this tab, with nothing sent anywhere.
Runs entirely on your deviceThe conversion happens in this browser tab. Nothing you type is uploaded, logged or stored, which is worth knowing for anything you would not paste into a search box.
Explore general converters
Find related browser-local tools for nearby tasks without starting another search.
Browse all general convertersAbout HSL to Hex
Hex is the compact, universal way to write a colour for the web - six digits that every design tool, stylesheet and component library accepts - while HSL is the comfortable way to choose one. Converting HSL to hex closes that loop: you adjust a colour intuitively as a hue, saturation and lightness, then emit the tidy hex code that everything downstream expects. The conversion goes through RGB internally, because hex is simply RGB written in base sixteen, but you never see that intermediate step. This reads the three HSL components, works out the channel values, and assembles the six-digit hex code with its leading hash, ready to paste into CSS, a design file, or anywhere a colour is expected.
Using HSL to Hex
- The hue, saturation and lightness are parsed from the input in any reasonable notation.
- They are converted to red, green and blue channel values using the standard formula.
- Each channel is written as two hexadecimal digits, padded so a small value keeps its two characters.
- The three pairs are joined and prefixed with a hash to form a six-digit hex code.
- The output is the compact form used across the web.
Where hsl to hex helps
Finalising a generated palette
Generate shades by varying HSL lightness, then convert each to hex for delivery.
Hue alone does not specify a visible colour
At zero saturation, changing hue does not change the grey result; lightness determines how bright it is. At zero lightness the result is black regardless of hue. Use a middle lightness and nonzero saturation when checking whether a hue change is working. The converted hex value does not include an alpha channel.
Before you use the result
- Rounding to whole channels means a round trip may differ by one, which is invisible.
- It produces an opaque six-digit code; an alpha value is not encoded here.
- Out-of-range HSL components are clamped to their nearest valid value.
- It works in sRGB, the web standard.
- The colour is unchanged; only the way it is written differs.
Questions about HSL to Hex
Why go through RGB?
Hex is just RGB in base sixteen, so the conversion computes the channels first. You only see the final hex.
Is the hash included?
Yes. The output is a standard six-digit hex code with its leading hash.
Can it output an alpha hex?
No. It produces the opaque six-digit form.
Does rounding lose accuracy?
Only by up to one channel value, which is imperceptible.
Related tools
HSL to RGB
Convert an HSL colour to RGB in your browser.
RGB to Hex
Convert an RGB colour to a hex code in your browser, from any common RGB format.
Hex to CMYK
Convert a hex colour to CMYK in your browser, to take a web colour toward print.