HSLをHEXに変換
HSL to HEX turns a hue angle, a saturation and a lightness into a hex colour. Saturation and lightness set how far the colour reaches from grey; the hue angle decides which 60° sector of the wheel it lands in and therefore which channel is largest. The three channels come out as 0–255 values and each becomes two hex digits.
このツールの画面は英語表記です。
Enter a colour on the left. This accepts hex with or without the hash, rgb(), hsl(), oklch() and the CSS colour names.
以下の解説は英語のみでご覧いただけます。
How does HSL to HEX Converter work?
The conversion runs in three steps. Chroma — how far the colour is from grey — comes from saturation and lightness together: (1 − |2L − 1|) × S. That factor is what makes chroma shrink towards both ends, because a colour at 5% or 95% lightness has very little room to be colourful.
The sector decides which channel wins
Divide the hue by 60 and you land in one of six sectors. Each sector has a fixed pattern: one channel at full chroma, one at zero, and one ramping between them according to how far through the sector you are. At 32° you are just over halfway from red towards yellow, so red is at full chroma, green is at 0.53 of it, and blue is at zero — which is the orange at the top of this page.
Then lightness moves the whole thing
The three values so far describe the colour at its most saturated. Adding L − chroma / 2 to each shifts the set up or down to the lightness you asked for, without changing the differences between them — which is what keeps the hue constant as lightness changes.
Why you cannot reach every hex from every HSL
You can, in fact: HSL and sRGB describe exactly the same set of colours and the mapping is a bijection. What you cannot do is get back the same HSL numbers after a round trip, because hex has 16.7 million values and HSL as usually written — a whole-number hue and a tenth of a percent — has fewer. Two nearby HSL values can round to the same hex, and converting that hex back gives whichever of them the formula produces. If exactness matters, keep the hex.
A warning about building scales this way
A very common pattern is to take a brand colour, convert it to HSL, and generate a palette by stepping lightness from 95% down to 10%. It produces even numbers and uneven colours: HSL lightness weights all three channels equally, and the eye does not, so the yellows in the ramp look far lighter than the blues at the same number. If that is what you are here to do, generate the scale in OKLCh instead — it is what the picker on this site does, and the steps come out looking as even as they measure.
Hue, saturation, lightness
hsl(32 100% 50%)
The hex colour
#ff8800 chroma = (1 − |2 × 0.5 − 1|) × 1.00 = 1.000 sector = 32 / 60 = 0.53 (red → yellow) channels = 1.000, 0.533, 0.000 → 255, 136, 0 → ff 88 00
What options and edge cases does HSL to HEX Converter support?
| Parameter | Type | Default | Behaviour & edge cases |
|---|---|---|---|
| hsl(32 100% 50%) | modern | spaces | The current CSS syntax. The hue unit is optional; 32 and 32deg are the same. |
| hsl(32, 100%, 50%) | legacy | commas | Still valid everywhere. Not deprecated, and no reason to rewrite it. |
| hsla(…) | alias | — | The same function as hsl(), which now takes alpha directly. |
| Hue | any number | wraps | 370 is 10, and −30 is 330. The angle is modular, so out-of-range values are valid rather than errors. |
| Saturation 0% | — | grey | Produces a grey at the given lightness, whatever the hue is set to. |
| Lightness 0% / 100% | — | black / white | Both collapse every hue and saturation to the same colour. |
| Alpha | 0–1 or % | 1 | Appended as a fourth hex pair. 0.5 becomes 80. |
| Out of range | — | clamped | Saturation and lightness are clamped to 0–100 rather than rejected, as CSS does. |
Frequently asked questions
How do I convert HSL to hex by hand?
Compute chroma as (1 − |2L − 1|) × S with L and S as fractions. Divide the hue by 60 to find the sector, and compute the middle channel as chroma × (1 − |(hue/60 mod 2) − 1|). Assign chroma, that middle value and zero to red, green and blue according to the sector, add L − chroma/2 to all three, multiply by 255, and write each as two hex digits.
Does hsl(32 100% 50%) always give the same hex?
Yes. The conversion is deterministic and the same in every browser and tool; hsl(32 100% 50%) is #ff8800 everywhere. What is not guaranteed is the return journey — converting #ff8800 back may give a hue of 31.9 depending on how the tool rounds, because hex holds more distinct values than a whole-number hue does.
Why does changing lightness in HSL also seem to change the hue?
It does not change the hue number, but it changes what you see, because HSL's lightness axis is not perceptual. Moving from 50% to 70% lightness on a blue looks like a much smaller change than the same move on a yellow, so a set of colours that share a lightness number do not look like they share a lightness. Working in OKLCh removes the effect entirely.
What is a good way to build a colour scale from one HSL value?
Not by stepping HSL lightness, which is the usual advice and produces visibly uneven steps. Convert to OKLCh, step its lightness on a curve, hold hue, and taper chroma at both ends so the light steps are not fluorescent and the dark ones do not glow. The colour picker on this site does exactly that and will hand you the eleven values and the CSS variables.
Can I write a hue above 360 or below 0?
Yes, and CSS accepts it. The hue angle is modular, so 370deg is 10deg and −30deg is 330deg. It is genuinely useful in an animation or a generated palette where an angle is being incremented and you would rather not write the wrap-around yourself.
Why does another converter give me a hex one digit different?
Rounding. HSL is continuous and each hex channel has only 256 steps, so a channel that lands on 127.5 has to go one way or the other; this converter rounds to nearest, and a tool that truncates instead lands one lower. The two colours are indistinguishable on screen — the gap is 1/255 of one channel — but they are not the same string.