Colour Converter - HEX, RGB, HSL at a glance
- What it does
- Convert colours between HEX, RGB and HSL notation instantly, with an explanation of when each format is the right one to use in CSS.
- Where it runs
- Entirely in your browser — no data is uploaded
- Works offline
- Yes, once the page has loaded
- Cost
- Free, with no account and no usage limit
- Category
- Converters
How to use the converter
- Enter a colour in HEX, RGB or HSL, or pick one visually.
- Read the other notations, all updated together.
- Copy the format your stylesheet or design tool expects.
The three notations
| Format | Example | Best for |
|---|---|---|
| HEX | #FF5733 | Compact, universally supported, what design tools hand you. |
| RGB | rgb(255 87 51) | Programmatic manipulation, canvas work, anything computing pixel values. |
| HSL | hsl(11 100% 60%) | Design systems. Adjusting lightness while keeping the hue is trivial. |
HEX and RGB carry identical information - #FF5733 is exactly rgb(255, 87, 51), since each pair of hex digits is one channel byte. HSL is a different way of describing the same sRGB space, so it converts losslessly too but rounds when you go back and forth.
Why HSL is worth learning
HSL separates hue (position on the colour wheel, 0-360), saturation (how vivid, 0-100%) and lightness (0% black, 50% pure colour, 100% white). That separation is what makes it useful.
To make a button's hover state darker in HEX you have to guess at new digits. In HSL you subtract ten from the lightness and the hue is guaranteed unchanged. To build a full palette from a brand colour, keep the hue and vary saturation and lightness. To find a complementary colour, add 180 to the hue.
This is why most modern design systems define colours in HSL, often as CSS custom properties holding the three components separately so that opacity and lightness can be adjusted independently.
Transparency
All three notations support an alpha channel. Eight-digit hex adds two digits for opacity: #FF5733CC is about 80% opaque. Modern CSS syntax uses a slash - rgb(255 87 51 / 80%) and hsl(11 100% 60% / 80%).
One thing to watch: a semi-transparent colour blends with whatever is behind it, so the same value looks different over different backgrounds and its contrast ratio changes with it. For text, prefer an opaque colour you have actually measured.
Contrast and accessibility
Converting a colour is easy; choosing a legible one is the part that matters. WCAG requires a contrast ratio of at least 4.5:1 between body text and its background, and 3:1 for large text - 18pt, or 14pt bold - and for interface components.
Two traps catch people out. Contrast depends on relative luminance, not on how different the colours look: mid-tone grey on mid-tone blue can fail badly despite appearing distinct. And placeholder text, disabled states and light grey captions are where real sites fail most often, usually because they were chosen to look subtle rather than measured.
A useful shortcut in HSL: a lightness difference of roughly 50 percentage points between text and background usually clears 4.5:1, but verify with a contrast checker rather than trusting the rule.
Beyond sRGB
HEX, RGB and HSL all describe colours within sRGB, the standard gamut of the last twenty-five years. Modern displays can show considerably more, and CSS now offers oklch(), lab() and display-p3 to reach it.
oklch() in particular is worth knowing about: it is perceptually uniform, so changing its lightness by ten produces the same visual step regardless of hue. HSL does not behave that way - a yellow at 50% lightness looks far brighter than a blue at 50% - which is why HSL palettes often need manual correction per hue.
Frequently asked questions
They carry the same information, so it is a matter of context. HEX is more compact and is what design tools produce; RGB is easier to manipulate in code. Use HSL when you need to derive related shades.
Alpha, or opacity. #FF5733FF is fully opaque, #FF573380 is about 50% transparent. Supported by all current browsers.
Rounding. HSL components are typically stored as integers, so a round trip through HSL can shift a channel by one. It is imperceptible visually but shows up if you compare the values.
Convert to HSL and increase the lightness. That keeps the hue exactly, which adjusting hex digits by hand does not.
Nothing you enter here leaves your browser
Colour Converter - HEX, RGB, HSL does its work in JavaScript running on your own device. The page loads once, and after that there is no upload step and no server involved — which matters here because exported data frequently contains customer records or transactions.
You can verify this rather than taking our word for it: load the page, disconnect from the internet, and the tool keeps working. Our privacy policy sets out what is and is not collected, and this guide explains why the distinction matters.