Convert HEX to HSL Hexadecimal ↔ Hue Saturation Lightness Free Online Secure
Type a value in HEX and read it in HSL 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 HEX to HSL
A hex code such as #5A4632 is a fine way to store a colour and a poor way to think about one. Nothing in the digits tells you that the colour is a brown, how bright it is or what a slightly paler version would look like. HSL was invented to fix that. It describes a colour the way people tend to talk about it: which hue it is, how vivid it is and how light it is. To convert HEX to HSL is to translate a colour from the form a design tool hands you into the form you can reason with: hsl(30, 29%, 28%) is a dark, muted orange-brown, and you can see at once that raising the last number will make it paler.
That is the real reason designers and front-end developers use the conversion. They have a brand colour in hex and need a family of related colours: a lighter one for a hover state, a darker one for a pressed button, a very pale one for a background tint, a desaturated one for a disabled control. In hex, each of those is a new hunt for three pairs of digits. In HSL, each is a change to one number. The colour is the same colour, seen through a more useful lens.
This page converts in your browser, and nothing is uploaded. Below you will find how the three numbers of HSL are calculated from the hex digits, what the conversion keeps and where it rounds, what hue, saturation and lightness mean in practice, how designers use HSL to build palettes and states, and the traps that catch people who convert HEX to HSL for the first time.
What HSL describes
Hue: the position on the colour wheel
Hue is an angle from 0 to 360 degrees around a colour wheel. Red sits at 0, yellow at 60, green at 120, cyan at 180, blue at 240 and magenta at 300; at 360 you are back at red. A hue of 30 is between red and yellow, which is orange. The number says which colour family you are in, and nothing about how bright or pale it is.
Saturation: how vivid
Saturation is a percentage. At 100% the colour is as pure as the hue allows; at 0% it has lost all its colour and is a grey. A saturation of 29%, as in our example brown, is a muted, earthy colour. Lowering saturation is the quickest way to make a loud colour calmer without changing its character.
Lightness: how pale or dark
Lightness is also a percentage. At 0% the colour is black whatever the hue and saturation; at 100% it is white; at 50% it is the full, normal colour. Our brown at 28% is on the dark side. Raising the number gives a paler version of the same colour, and lowering it a darker one, which is exactly the change designers want most often.
Why it is easier than hex
In hex, making a colour paler means increasing all three pairs by different amounts so that the hue does not drift, which is nearly impossible to do by eye. In HSL it means changing a single figure and leaving the other two alone.
How the conversion works
From three bytes to an angle and two percentages
The converter first reads the hex digits as the red, green and blue values, each from 0 to 255, and scales them to between 0 and 1. It finds the largest and the smallest of the three. Lightness is the average of the two. Saturation depends on how far apart they are, relative to lightness. Hue depends on which channel is largest and how the other two compare. If all three are equal, the colour is grey, saturation is zero and the hue has no meaning; the converter then shows 0 for it.
The example
For #5A4632 the bytes are 90, 70 and 50. Red is largest at 0.353, blue smallest at 0.196. Lightness is half their sum, 0.275, about 28%. The spread is 0.157, so saturation is 0.157 divided by the sum 0.549, about 29%. Red is the largest channel and green lies between, which puts the hue at 30 degrees. The result is hsl(30, 29%, 28%).
Whole numbers
The three numbers are rounded to whole degrees and whole percents when they are written down. That is the form people use and the form CSS expects in everyday work, but it means that some information is dropped at the last digit, as the next section explains.
What the conversion keeps and what it cannot
It keeps the colour as the eye sorts it
The result is 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. You can make a colour paler or a shade darker by changing one number, which is nearly impossible in hex.
It cannot promise the same bytes 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. If you need the exact bytes back, keep the hex. Convert HEX to HSL to work with a colour, and keep the hex as the master.
Greys have no hue
When the three bytes are equal, there is nothing to say about hue. The converter gives a hue of 0 and a saturation of 0%, and the lightness alone describes the grey. Do not read anything into the 0.
Using HSL in practice
Building a family of shades
Take the base colour hsl(30, 29%, 28%). A lighter shade for hover is hsl(30, 29%, 34%). A very pale tint for a background is hsl(30, 29%, 94%). A darker shade for pressed states is hsl(30, 29%, 22%). The hue and saturation stay put, so the colours obviously belong together. Doing the same in hex would take several attempts and still look slightly off.
Theming and dark mode
A theme often needs the same palette in a light and a dark version. With HSL, you keep the hue and adjust lightness and saturation: lighten backgrounds and darken text for the light theme, and the reverse for the dark. Defining the hue as a custom property and varying only the lightness is a common and tidy way to do it.
Generating palettes
To find colours that go with a base, rotate the hue. Thirty degrees either side gives analogous colours, 180 gives the complement, and 120 or 240 give a triad. Fix saturation and lightness, change the hue, and the colours have a uniform feel. It is a quick way to start a palette that does not look random.
Accessible contrast
Lightness is the main control for contrast. If text is hard to read on a coloured background, the fix is usually to increase the difference in lightness between them, and HSL makes that a matter of adjusting one number on each side.
How to convert HEX to HSL here
Type or paste the hex code
Enter the colour in the first field, with or without the hash sign. Three and six digit forms are accepted, and the eight digit form with transparency is read too.
Read the hsl value
The answer appears at once, as in #5A4632 = hsl(30, 29%, 28%). The three numbers are the hue in degrees and the saturation and lightness in percent.
Copy it into your stylesheet
Use the result as it is, in a rule such as color: hsl(30, 29%, 28%). To adjust the colour, change the last figure. The tool for the opposite direction is HSL to HEX.
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 HEX to HSL
Expecting a perfect round trip
Because of the rounding, converting back may give a code one or two steps away from the original. For a single colour it is invisible. For a design system where many colours are converted back and forth, it can accumulate. Keep the hex as the source.
Assuming equal lightness means equal brightness
Two colours with the same HSL lightness can look quite different in brightness: a yellow at 50% looks far brighter than a blue at 50%. HSL lightness is a convenient number, not a measure of perceived brightness. For contrast checks, use a proper contrast tool.
Forgetting the percent signs
In CSS, the saturation and lightness in hsl() carry percent signs, and the hue is a plain number or a number with deg. Leaving the signs out is a classic mistake.
Reading too much into a grey
A grey has no hue. If the converter shows 0 for it, that does not mean it is reddish.
Questions people ask before converting
What is #FF0000 in HSL?
hsl(0, 100%, 50%), pure red.
What is #FFFFFF in HSL?
hsl(0, 0%, 100%), white. The hue is meaningless for white, and the converter shows 0.
Is HSL supported everywhere?
All current browsers understand hsl() and hsla(). It has been in CSS for many years.
Is the conversion exact?
It is exact in the sense of describing the same colour, but the numbers are rounded to whole degrees and percents, so going back may land a step away.
Is my colour uploaded?
No. The arithmetic runs in your browser and nothing is sent anywhere.
How do I go back?
With HSL to HEX.
Choosing wisely when you convert HEX to HSL
Use HSL to work, hex to store
Keep the master palette in hex, where it is unambiguous, and use HSL when you want to create variations. Round trips lose a little; the master does not.
Consider newer colour spaces
CSS now offers oklch() and similar notations in which equal lightness really does look equal. They are worth learning for new design systems. HSL remains the notation almost everyone understands and every tool supports.
Use custom properties
Define --hue, --sat and --light, and build colours from them: hsl(var(--hue) var(--sat) var(--light)). A theme then changes by editing a few numbers.
Reading and writing HSL with confidence
Some landmarks to remember
A few numbers make HSL easier to read. Hues at multiples of 60 are the pure colours: 0 red, 60 yellow, 120 green, 180 cyan, 240 blue, 300 magenta. Lightness of 50 with saturation of 100 gives the purest version of any hue, and lightness 95 or above is a tint so pale that it works as a background. When you convert HEX to HSL and see a hue near one of these landmarks, you can name the colour family at a glance.
Moving between families
Adding 180 to a hue gives the colour opposite on the wheel, which is the complement and usually the strongest contrast. Adding or subtracting 30 gives a neighbour that sits comfortably beside the original. Designers use these steps to pick accents that match a brand colour without guessing.
Keeping a note of the converted values
When you convert HEX to HSL for a palette, write the results in a table with the original hex beside them. The table shows how the colours relate, and if a hue or lightness is out of line with the others, the oddity is visible at once. It also gives your team a shared reference.
Testing on real screens
Colours that look balanced on a calibrated monitor can look different on a phone in sunlight or a cheap laptop. Check the finished palette on at least two devices, and adjust lightness a little if the pale tints disappear on one of them.
Related converters
The same family of tools covers the neighbouring conversions. To go back, use HSL to HEX. 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 and px to em do for lengths what this page does for colours.
A worked example
Say your brand colour is #1E7A5C. You convert HEX to HSL and read hsl(160, 61%, 30%). For a hover state you write hsl(160, 61%, 36%), a little lighter. For a pressed state, hsl(160, 61%, 24%). For a very pale background behind a notice, hsl(160, 40%, 95%). For a disabled button, hsl(160, 12%, 60%), the same hue with most of the colour taken out. Five colours, one hue, written in a minute, and they all look as though they belong together. When the brand colour changes, you change the hue number once.
A short checklist
Before converting
Decide what you want to do with the colour: vary it, theme it or just read it.
While converting
Paste the hex, read the hsl and note the three numbers.
After converting
Make the variations by changing one number at a time, and look at them on the real background.
Common mistakes
Treating the rounded numbers as exact
They are whole numbers. Keep the hex as the master.
Equating lightness with brightness
Two colours at the same lightness can differ greatly in how bright they look.
Leaving out the percent signs
Saturation and lightness need them in CSS.
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 HEX to HSL.
Summary
To convert HEX to HSL here, type or paste the hex code and read the hsl value at once. The conversion keeps 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, since you can make a colour paler or a shade darker by changing one number, which is nearly impossible in hex. 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, so a colour taken to HSL and back can land one or two steps from where it started. If you need the exact bytes back, keep the hex. Nothing is uploaded.