HSL describes colour the way people tend to think about it: a hue around a colour wheel, how saturated or muted it is, and how light or dark it is. HEX describes the same colour as three packed channel values, which is what CSS, image formats and most design tools store internally. Neither is more correct, they are two coordinate systems for the same point in colour space, and moving between them is exactly what this tool does.
Nothing you type here is sent anywhere. The hue to RGB maths runs as ordinary JavaScript in the tab you already have open, so you can convert as many colours as you like without a network request slowing you down.
When you need an hsl to hex converter
Design systems and CSS custom properties increasingly favour HSL because adjusting lightness or saturation to build a colour scale is more intuitive than doing the same thing in RGB, where all three channels usually need to change together. The moment that HSL colour needs to go into an image editor, a brand guideline document, or a codebase that stores colours as hex strings, you need a reliable hsl to hex converter rather than an approximation.
It is also the fastest way to sanity check a colour you are designing directly with the sliders. Because hue, saturation and lightness map onto separate, understandable axes, nudging hue while holding saturation and lightness fixed produces a predictable family of colours, which is a much easier way to explore a palette than editing red, green and blue by hand.
- Converting a colour defined in CSS as hsl() into a hex code for a design file or brand document.
- Exploring a range of hues at fixed saturation and lightness to find one that matches a reference colour.
- Converting an HSLA colour with transparency into an 8 digit hex code.
- Checking that a colour picked by hue, saturation and lightness produces the RGB values a piece of code expects.
How hue, saturation and lightness map to HEX
Hue is an angle around a colour wheel from 0 to 360 degrees, where 0 and 360 both land on red, 120 lands on green and 240 lands on blue, with every shade in between reachable along the way. Saturation is a percentage from 0, completely grey, to 100, the most vivid version of that hue possible. Lightness runs from 0, pure black, through 50, the fully saturated colour, to 100, pure white, regardless of hue or saturation.
Converting hsl color to rgb involves finding a chroma value from saturation and lightness, then distributing that chroma across the red, green and blue channels according to which 60 degree segment of the wheel the hue falls into, before adding back a lightness offset so the result sits at the correct brightness. Each channel then rounds to the nearest integer from 0 to 255, which is exactly what a hex pair can represent with no loss.
HSLA and the alpha slider
HSLA adds a fourth value to HSL, alpha, expressed as a fraction between 0 and 1 or a percentage, describing how transparent the colour is. Converting hsla to hex code works the same way as the three colour channels, except the final alpha fraction is multiplied by 255 and written as a two digit hex pair appended after the colour, producing an 8 digit hex code when alpha is below full opacity.
This tool defaults the alpha slider to 100 percent so the hex output stays a clean 6 digit code until you actually need transparency, since appending a redundant ff pair adds no information and some older tools do not accept the 8 digit form.
How this hsl to hex converter works under the hood
The conversion runs the standard HSL to RGB algorithm from the CSS Color specification: compute chroma as one minus the absolute value of twice the lightness minus one, multiplied by saturation, then use the hue divided into six 60 degree sectors to determine an intermediate colour, and finally add a lightness offset to shift the whole result to the correct brightness. Each resulting channel is rounded and converted to a two digit hex pair.
Because this is deterministic arithmetic with no external dependency, the same hue, saturation and lightness input always produces the identical hex output, which makes it safe to rely on when two different tools or two different team members need to agree on exactly the same colour.
| Hue | HSL | HEX |
|---|---|---|
| 0 degrees | hsl(0 100% 50%) | #ff0000 |
| 60 degrees | hsl(60 100% 50%) | #ffff00 |
| 120 degrees | hsl(120 100% 50%) | #00ff00 |
| 180 degrees | hsl(180 100% 50%) | #00ffff |
| 240 degrees | hsl(240 100% 50%) | #0000ff |
How to convert hue saturation lightness to hex
- 1
Set the hue
Drag the hue slider from 0 to 360 degrees, or type an exact angle.
- 2
Set saturation and lightness
Adjust saturation for how vivid the colour is and lightness for how bright or dark it is.
- 3
Adjust alpha if needed
Lower the alpha slider for a translucent colour, or leave it at 100 percent for full opacity.
- 4
Copy the HEX or RGB output
Read off the live hex code and RGB values, and copy whichever format your project needs.
Related tools worth bookmarking
Sources and further reading
Frequently asked questions
Common questions about the hsl to hex converter.
Compute a chroma value from saturation and lightness, distribute that chroma across red, green and blue based on which 60 degree segment of the hue wheel you are in, add a lightness offset, then convert each resulting 0 to 255 channel value to a two digit hexadecimal pair. It is a multi step formula that is easy to get wrong by hand, which is why an automated hsl to hex converter is worth using for anything beyond a rough estimate.
Saturation of 0 percent means the colour has no chroma at all, so the hue angle becomes irrelevant and only lightness determines the result. That is why the classic HSL colour wheel always converges to a single grey axis running from black to white down its centre, regardless of what hue is selected.
HSL and HSB, also called HSV, both use hue as an angle but define saturation and brightness differently. In HSL, 100 percent lightness is always pure white, while in HSB, 100 percent brightness with full saturation is the most vivid version of the hue, not white. Mixing the two up when converting by hand is a common source of colours that look wrong despite the numbers appearing reasonable.
Yes. The alpha slider produces an 8 digit hex code whenever transparency is below 100 percent, with the alpha fraction converted to a two digit hex pair the same way the colour channels are. At full opacity the output stays a standard 6 digit hex code.
The colour channels round to the nearest whole number in the 0 to 255 range before becoming hex pairs, since HSL is a continuous model and RGB and HEX are not. That rounding is sub pixel in visual terms and matches how every browser and design tool performs the same conversion internally.
The hue slider is constrained to the valid 0 to 360 degree range because that fully covers the colour wheel with no gaps or duplication. Saturation, lightness and alpha are similarly constrained to their valid 0 to 100 percent ranges so the tool always produces a genuine colour rather than an undefined result.