Convert HSL to HEX Hue Saturation Lightness ↔ Hexadecimal Free Online Secure
Type a value in HSL and read it in HEX at once. The arithmetic happens in your browser, nothing is sent anywhere, and what the conversion depends on is written out below rather than assumed.
Nothing uploaded
Where these notations come from
Hex and RGB are the same thing written twice. A screen colour is three numbers — how much red, green and blue light to emit — each from 0 to 255, which is one byte; hex simply writes those bytes in base sixteen, so #FF8800 and rgb(255, 136, 0) are the same instruction to the same pixel. HSL was invented because neither is readable by a human: it gives hue as an angle around a colour wheel, with saturation and lightness as percentages, so a designer can make something lighter without recomputing three figures. CMYK belongs to a different world altogether — ink rather than light. It is subtractive, built from four printing plates, and it cannot reach every colour a screen can, because a screen emits light while paper only reflects it.
Where you meet them
Hex is what you type into a stylesheet and what a design tool hands you. RGB appears wherever a colour needs arithmetic — gradients, transparency, code that computes a shade. HSL is what you reach for when adjusting a palette by hand, because the changes you want are usually changes of one of its three numbers. CMYK is what a printer asks for, and converting into it is the moment a design stops being light and becomes ink.
Questions people ask
Why does my CMYK result differ from what my printer gives me?
Because there is no single correct conversion. The arithmetic on this page is the simple, device-independent one, which is the right answer when you need a starting point or a rough equivalent. A print shop converts through a colour profile that accounts for the specific ink, paper and press, and the same RGB colour will produce different CMYK values on glossy stock than on uncoated. For anything that must match, ask the printer for their profile rather than trusting a formula.
Why can't some screen colours be printed?
Because the two cannot reach the same colours. A screen makes colour by adding light and can produce a vivid, saturated cyan or green that ink simply cannot match; paper makes colour by absorbing light, and the brightest it can ever be is the white of the page. The set of colours each can reach is called its gamut, and where they do not overlap, a conversion has to choose the nearest available colour. That is why a bright screen colour often looks slightly dulled in print.
Is the answer exact?
Where both units are defined in terms of one another by whole numbers, yes — the page says so above the figure, and the only rounding is in how many digits are shown. Where the ratio has no finite decimal, the page shows twelve significant digits and says the relation is approximate rather than pretending otherwise.
Does anything I type leave my device?
No. The arithmetic runs in your browser; nothing is uploaded and there is no server to upload it to. Load the page once and it keeps working with the network switched off.
Why you convert HSL to HEX
You worked out a colour in HSL, because it is the notation in which you can think: hue 30, saturation 29%, lightness 28%, a muted brown, and a paler version at 34% for the hover state. Now the colour has to go somewhere that wants a hex code: a design token file, a brand sheet, a tool that does not understand hsl(), an email template, a message to a colleague. To convert HSL to HEX is to take the colour you reasoned about and write it down in the form that is short, unambiguous and understood by everything.
The conversion works in the opposite direction to the one that designers meet first. It starts from three human-friendly numbers and arrives at three bytes. Each step is straightforward arithmetic, but it involves a few trigonometry-like cases and rounding, which is why people prefer to have it done for them. The page does it in your browser, and nothing is uploaded. Below you will find how the three numbers become the six hex digits, what the conversion keeps, why a colour that has been through HSL can land a step or two from where it began, the ways designers use the conversion, and the traps to avoid.
How the conversion works
From hue, saturation and lightness to red, green and blue
The converter first works out the chroma, which is how far the colour is from grey: it grows with saturation and shrinks as lightness moves away from 50%. It then places the hue in one of six sectors of the colour wheel, each 60 degrees wide, and from the sector decides which of the three channels is at its maximum, which is at its minimum and which lies in between. Finally it adds a constant so that the lightness comes out right, scales the three values from the range 0 to 1 up to 0 to 255, and rounds each to a whole number. Those three bytes are written in base sixteen, two digits each.
An example with numbers
Take hsl(30, 29%, 28%). The chroma is (1 − |2 × 0.28 − 1|) × 0.29 = 0.56 × 0.29 = 0.1624. The hue of 30 degrees is halfway through the first sector, so the middle channel is half the chroma, 0.0812. The constant to add is 0.28 − 0.0812 = 0.1988. So red is 0.1624 + 0.1988 = 0.3612, green is 0.0812 + 0.1988 = 0.28 and blue is 0.1988. Multiplied by 255 and rounded, these are 92, 71 and 51. In hex, that is #5C4733.
Greys
When saturation is 0%, the colour is a grey whatever the hue, and the three bytes are equal. hsl(0, 0%, 50%) is #808080. The hue is ignored, so any hue number gives the same grey.
What the conversion keeps and what it cannot
It keeps the colour as you described it
The result is the colour whose hue, saturation and lightness you gave, written as bytes. The three numbers you typed are the colour as the eye sorts it, a hue on the wheel, how saturated it is, how light. That is why HSL is worth having, and the conversion carries your choice to hex faithfully.
It cannot promise the same numbers on the way back
The two describe the same colours, but HSL reaches them through a different geometry and its three numbers are rounded to whole degrees and whole percents when written down. So a colour taken to HSL and back can land one or two steps from where it started: visually the same, not byte for byte the same. In our example, #5A4632 was a colour whose HSL is about hsl(30, 29%, 28%); converting those rounded figures back gives #5C4733, two steps away in red. If you need the exact bytes, keep the hex.
Percent and degree signs
The page reads the hue in degrees and the saturation and lightness in percent. You can write them with or without the signs. A hue above 360 or below 0 is wrapped around the wheel, so 390 is the same as 30.
Practical uses
Writing a design token file
A design system stores colours as tokens. Many teams create colours in HSL, because they can reason about them, and publish them in hex, because every tool reads it. Convert HSL to HEX once for each token, and the published file is something everyone can use.
Producing colours for tools that do not read hsl()
Email clients, some document editors, older graphics programs and many chart libraries accept hex only. Whatever you worked out in HSL has to be converted before they can use it.
Checking a generated palette
A script that generates a palette by rotating hue gives a list of hsl() values. To see them as the codes you would put in a stylesheet or hand to a designer, convert each to hex. It also lets you spot values that round to the same code and therefore are not really different.
Sharing a colour in a message
A hex code is short, copyable and understood by nearly everyone who works with colour. An hsl() value is longer and less familiar outside design. When you send a colour to someone, hex is the courteous form.
How to convert HSL to HEX here
Type or paste the hsl value
Enter the colour in the first field in the form hsl(30, 29%, 28%), or just the three numbers. Hue is in degrees, saturation and lightness in percent.
Read the hex code
The answer appears at once, as in hsl(30, 29%, 28%) = #5C4733. It is written with capital letters and a hash sign.
Copy it into your work
Use the code in your stylesheet, token file or message. For the opposite direction, HEX to HSL is a click away.
Where these notations come from
Hex and RGB are the same thing written twice
A screen colour is three numbers, how much red, green and blue light to emit, each from 0 to 255, which is one byte. Hex simply writes those bytes in base sixteen. To see the numbers, convert HEX to RGB.
HSL and CMYK
HSL was invented because neither is readable by a human: it gives hue as an angle around a colour wheel, with saturation and lightness as percentages, so a designer can make something lighter without recomputing three figures. CMYK belongs to a different world altogether, ink rather than light. It is subtractive, built from four printing plates, and it cannot reach every colour a screen can, because a screen emits light while paper only reflects it.
Traps when you convert HSL to HEX
Expecting the original code back
If you started from a hex code, converted it to HSL, adjusted nothing and converted back, you may get a different code a step or two away. For a single colour it is invisible. For a design system, decide which form is the master, and treat the other as derived.
Mixing up saturation and lightness
The two are easy to swap by mistake: hsl(30, 28%, 29%) is not hsl(30, 29%, 28%). The order is hue, saturation, lightness. If the colour on screen does not look as you expected, check that you did not reverse them.
Forgetting that lightness is not brightness
Two colours with the same lightness can look different in brightness. Yellow at 50% lightness looks much brighter than blue at 50%. If you are choosing colours for text and background, check their contrast with a proper tool, not by comparing lightness numbers.
Using out-of-range values
Saturation and lightness are limited to 0 to 100 percent. Values outside that range are clamped. A lightness of 120% is not brighter than white; it is white.
Questions people ask before converting
What is hsl(0, 100%, 50%) in hex?
#FF0000, pure red.
What is hsl(0, 0%, 100%) in hex?
#FFFFFF, white.
Can I use decimals?
Yes. hsl(30.5, 28.6%, 27.8%) is accepted. The result is rounded to whole bytes.
Is the conversion exact?
It gives the exact bytes for the numbers you typed, rounded to whole values. Going back may land a step away, because HSL numbers were rounded.
Is my colour uploaded?
No. The arithmetic runs in your browser and nothing is sent anywhere.
How do I go back?
With HEX to HSL.
Choosing wisely when you convert HSL to HEX
Decide which form is the master
If you design in HSL, keep the HSL values as the source and publish hex as output. If the brand gives you hex, keep that and use HSL only for variations. Mixing the two as equal sources is what creates the drift.
Use HSL for variation, hex for fixing
When you need a family of shades, work in HSL. When you need to fix a colour so that it is identical in every tool, write it as hex.
Keep the numbers you typed
Record the HSL values beside the hex in your palette note. If someone later wants a paler version, they can start from your numbers and not from a code that has already been rounded.
The six sectors of the wheel
Which channel is high, which is low
The conversion divides the wheel into six sectors of 60 degrees, and in each of them one channel is at its maximum, one at its minimum and the third changes smoothly. From 0 to 60, red is at maximum, blue at minimum and green rises: red turns to yellow. From 60 to 120, green is at maximum and red falls: yellow turns to green. From 120 to 180, green stays high and blue rises: green turns to cyan. From 180 to 240, blue takes over and green falls. From 240 to 300, blue stays high and red rises: blue turns to magenta. From 300 to 360, red takes over again and blue falls. When you convert HSL to HEX, it helps to know which sector your hue is in, because it tells you which of the three pairs in the answer will be largest.
Why the answer has a family resemblance
Colours of the same hue and saturation but different lightness give hex codes that look like relatives: the same pattern of which pair is high and which is low, only scaled up or down. #5C4733, #7A5F44 and #A38461 are all in the same family, with red largest, then green, then blue. You can learn to read this at a glance, and it makes mistakes easier to catch.
Building a lightness ramp
One hue, nine steps
A very practical use of the conversion is to build a ramp of a single colour from very pale to very dark, the sort of scale that design systems label 50, 100, 200 and so on up to 900. Choose a hue and a saturation, and step the lightness through values such as 96, 90, 80, 70, 60, 50, 40, 30 and 20 percent. Convert HSL to HEX for each step, and you have nine codes that belong together. Slightly reducing saturation at the extremes, a few points at the palest and darkest steps, often looks more natural than keeping it constant.
Naming the steps
Give each step a name that records its role, not its value: surface for the palest, border for the next, text for the darkest. In the code, a name tells the next reader what the colour is for, and you can change the number behind it without touching the rules that use it.
Light and dark themes
Mirroring the ramp
A dark theme is often the light theme with the ramp turned over: the palest step becomes the page background in the light theme and the darkest becomes the background in the dark one. If you built the ramp in HSL, the dark theme costs you nothing but a second set of conversions. Keep the hue fixed, which preserves the brand character, and adjust saturation slightly, since saturated colours tend to look harsh on dark backgrounds.
Checking both themes
Test each text and background pair of both themes for contrast. A colour that works on white may fail on near-black, and the check takes a minute with a contrast tool and the hex codes you have just produced.
When you only have a rough idea of the colour
Start from the wheel, then refine
Sometimes you do not have a hex code at all, only an idea: a calm blue, a warm orange, a fresh green. HSL is a good place to start, because you can pick a hue from the landmarks of the wheel, set a moderate saturation and a middling lightness, and then convert HSL to HEX to see what you have. If it looks too loud, lower the saturation; if it looks flat, move the lightness. Each trial costs seconds, and you end with a hex code that you can put straight into a stylesheet.
Related converters
The same family of tools covers the neighbouring conversions. To go back, use HEX to HSL. For the numbers behind the code, there are HEX to RGB and RGB to HEX, and for print, HEX to CMYK and CMYK to HEX. For the sizes in the same stylesheet, px to rem does for lengths what this page does for colours.
A worked example
Say you have chosen a green for the success state of an app: hsl(145, 55%, 38%). You type it and read #2C9658. You use that code in the token file as --success. For the background of a success notice you take the same hue, hsl(145, 45%, 94%), and read #E9F7EF. For the border, hsl(145, 45%, 78%), which reads #AEE0C3. Three codes, one hue, all derived in a minute, and each one a plain hex code that any tool in the team can open.
A short checklist
Before converting
Check the order of the three numbers: hue, saturation, lightness. Decide which form is your master.
While converting
Type the values, read the hex and copy it with its hash sign.
After converting
Look at the colour on screen in context, and note the HSL values beside the code for later.
Common mistakes
Swapping saturation and lightness
The order is hue, saturation, lightness.
Expecting to recover the old hex
It may land a step away. Keep the original if it matters.
Comparing lightness instead of contrast
Use a contrast tool for text and background.
Your colours stay on your device
The calculation happens locally. Your values are used by your own browser and nothing is sent anywhere. There is nothing to delete afterwards and no account to create. That is the plain way to convert HSL to HEX.
Summary
To convert HSL to HEX here, type the hue in degrees and the saturation and lightness in percent, and read the hex code at once. The conversion keeps the colour as the eye sorts it: a hue on the wheel, how saturated it is, how light. The two notations describe the same colours, but HSL reaches them through a different geometry and its three numbers are rounded to whole degrees and whole percents, so a colour taken to HSL and back can land one or two steps from where it started. If you need the exact bytes, keep the hex. Nothing is uploaded.