💡 Tip: paste whatever you have — hex with three, four, six or eight digits, rgb() and rgba(), hsl() and hsla(), hsv()/hsb(), cmyk(), lab(), lch(), oklab(), oklch(), any of the 148 CSS colour names, or transparent. Comma syntax and the modern space syntax both work, with a slash before the opacity.
🧭 User Guide
- Type or paste a colour. There is no Convert button — every panel updates as you type. If what you typed is not a colour, the tool says which part it could not read rather than quietly showing you the previous one.
- Or pick one. The swatch beside the input opens your operating system’s colour picker, and Random colour throws up a fresh one, which is a genuinely useful way to explore a hue you cannot name.
- Set the opacity with the slider. A colour that arrives with its own alpha — rgba(255, 0, 0, 0.5) or #FF000080 — brings it with it and moves the slider to match.
- Copy the notation you need. Thirteen are listed, each with its own Copy button, or take the whole set as CSS custom properties or as JSON from the two buttons underneath.
- Read the contrast. White text and black text on your colour are scored against WCAG 2.1, and the third box takes any second colour you want to test against — a background, a border, a brand colour you have to sit next to.
- Take the ramp. The tints-and-shades strip is a ready-made 50–900 scale built around your colour. Click any step to load it and convert that one instead.
🌈 Colour Systems Explained
HEX (hexadecimal)
Red, green and blue as hexadecimal pairs after a hash, each pair running 00 to FF, which is 0 to 255 in decimal.
CSS accepts four lengths and all four are read here: #F00 is shorthand for #FF0000, #F008 adds an opacity digit, and #FF000080 is red at 50% opacity.
RGB (red, green, blue)
The same three channels as plain numbers from 0 to 255, or as percentages.
An additive model: it describes how much red, green and blue light a screen mixes. Modern CSS writes rgb(255 0 0) with the opacity after a slash, which is what Chrome and Firefox devtools now copy to your clipboard.
HSL (hue, saturation, lightness)
Hue as an angle from 0 to 360 degrees, then how vivid the colour is and how close it sits to white or black.
Far easier to reason about than RGB when you want the same colour a bit lighter or a bit less intense. The hue may be written with deg, rad, turn or grad.
HSV / HSB (value or brightness)
Close to HSL, but the third number is the brightness of the strongest channel rather than the midpoint between strongest and weakest.
This is the model most design software is actually built on, so these are the numbers that match what Photoshop or Figma shows you.
CMYK (cyan, magenta, yellow, key)
A subtractive model for ink on paper: each channel is a percentage of coverage, and key is black.
Be careful with this one. The conversion here is the plain arithmetic one with no colour profile attached, and real print colour depends on the press, the ink and the paper. Treat it as a starting point and get final values from your printer’s profile.
LAB and LCH
Colour described the way an eye responds to it rather than the way a screen produces it.
L is lightness from 0 to 100, a runs green to red, b runs blue to yellow. LCH is the same space in polar form, with a chroma and a hue angle. Their value is that equal numeric steps look like equal visual steps, which is not true of HSL.
OKLAB and OKLCH
A newer perceptual space that fixes the places where LAB drifts, particularly around blues.
It is now valid CSS, and it is what most design systems built since 2023 generate their ramps in, because holding lightness constant across several hues in OKLCH actually produces colours that look equally light. The tint strip in this tool is stepped in OKLCH for that reason.
CSS colour names
The 148 keywords CSS understands, from the obvious ones to tomato, rebeccapurple and gainsboro.
All of them are accepted as input, along with transparent. Enter any colour and the tool names it if a keyword matches exactly, or tells you the nearest one if none does.
About the Colour Code Converter
Paste a colour in any notation and this tool shows you every other notation for it: HEX with and without an alpha channel, RGB and RGBA in both the old comma syntax and the modern space syntax, HSL, HSV/HSB, CMYK, LAB, LCH, OKLAB and OKLCH, plus the CSS colour name if there is an exact one and the nearest name if there is not.
Every value it gives you converts back
This sounds like a low bar, and most converters fail it.
The reason is rounding. Whole-number HSL can express 360 × 101 × 101 = about 3.67 million combinations, while sRGB holds 16.7 million colours, so a converter that rounds HSL to whole numbers physically cannot describe most colours you give it. Feed #F661B8 to a converter that does, take the hsl(325, 89%, 67%) it prints, paste it back, and you get #F660B7 — a different colour.
This tool works the other way round: it builds each notation, reads it back through its own parser, and adds a decimal place until the value reproduces the colour exactly. That is why you will see hsl(324.97, 89.22%, 67.25%) rather than a tidier lie. Round it yourself if you prefer — but now that is your decision, taken knowingly, rather than something the tool did to your colour behind your back.
The one exception is marked in the table as approximate. CMYK is not a rounding problem; it is a different kind of thing altogether, and without a colour profile there is no exact answer to convert to.
A worked example
Every figure below comes from the tool itself.
| Format | #F661B8 becomes |
|---|---|
| HEX | #F661B8 |
| HEX with alpha | #F661B8FF |
| RGB | rgb(246, 97, 184) |
| RGB (modern) | rgb(246 97 184) |
| HSL | hsl(324.97, 89.22%, 67.25%) |
| HSV / HSB | hsv(324.97, 60.57%, 96.47%) |
| CMYK (approximate) | cmyk(0%, 60.6%, 25.2%, 3.5%) |
| LAB | lab(63.02% 65.53 -16.77) |
| LCH | lch(63.02% 67.65 345.64) |
| OKLCH | oklch(0.7078 0.2028 347.43) |
| OKLAB | oklab(0.7078 0.198 -0.0441) |
| Nearest CSS name | hotpink |
Note that the nearest name is not the same colour: hotpink is #FF69B4, which is close but distinct. Contrast comes out at 2.87:1 against white and 7.32:1 against black, so white text on this pink fails WCAG outright while black text passes at AAA.
Why each format is useful
Each one answers a different question.
HEX is compact and dominant in HTML and CSS, which is why it is everywhere on the web. RGB maps directly to how screens emit light and is handy when adjusting one channel at a time. HSL and HSV separate hue from intensity, which is what you want when you are making a colour lighter or more muted rather than changing it. CMYK is for print. LAB, LCH and OKLCH are for when the numbers need to match perception — building a palette where every colour is equally light, or measuring how different two colours really look, neither of which HSL can do honestly.
Tints, shades and contrast
The ramp under the conversion table is a ready-made design-token scale.
It places your colour on a 50–900 scale with tints above it and shades below, stepped in OKLCH so the jumps look even rather than merely being even arithmetically. Each step is fitted back into the sRGB gamut by reducing chroma rather than clipping channels, which is what stops a saturated light blue from turning lilac at the pale end. A colour already close to white or black anchors at that end of the ramp instead of the middle, because there is nothing lighter or darker to put beside it.
The contrast panel scores white text and black text on your colour against WCAG 2.1 — 4.5:1 for body text, 3:1 for large text, 7:1 for AAA — and the third box takes any second colour, so you can check a pairing rather than only a foreground. One caveat worth knowing: a contrast ratio takes no account of opacity. A semi-transparent colour’s real contrast depends on whatever is behind it, so measure the composited result, not the colour you set.
Common uses
Mostly translation between tools that disagree about notation.
Developers convert when a design tool speaks one format and the codebase needs another. Designers use it to build palettes, check accessible contrast, and generate tints and shades. Anyone matching a brand colour across several applications will reach for a converter like this regularly. And if you are moving a design system to OKLCH, this is the quickest way to see what your existing hex values become.
Related tools
Three that pair naturally with this one.
To sample a colour out of an image, use the Image Color Picker and paste the code here. For a quick one-way conversion there is the HEX to RGB Converter, and to see how a palette reads to colour-blind viewers there is the Colour Blindness Check. Everything runs in your browser — no colour you enter is uploaded anywhere.
Frequently Asked Questions
How do I convert a HEX colour to RGB, or back?
Type either one and the rest appear as you type.
#1D7DF2 gives rgb(29, 125, 242) and hsl(212.96, 89.12%, 53.14%); enter rgb(29 125 242) and you get #1D7DF2 back. The hash is optional on input, and both the three-digit and six-digit shorthands work.
Why are the HSL numbers not whole?
Because whole numbers would not be the colour you gave it.
Whole-number HSL can only name about 3.67 million of sRGB’s 16.7 million colours, so rounding it silently swaps your colour for a neighbour — #F661B8 becomes #F660B7. This tool prints exactly as many decimals as it takes to convert back to the colour you entered, and no more. If decimals are unnecessary you will not see them: rebeccapurple comes out as a clean hsl(270, 50%, 40%).
Does it support transparency (alpha)?
Yes, throughout.
Eight-digit hex, four-digit hex shorthand, rgba(), hsla() and the modern rgb(255 0 0 / 50%) slash syntax are all read on input, and the opacity slider sets it directly. Red at 50% comes out as #FF000080, rgba(255, 0, 0, 0.5), rgb(255 0 0 / 0.5) and hsl(0 100% 50% / 0.5).
Can I use CSS colour names?
All 148 of them, plus transparent.
Type tomato and you get #FF6347; type rebeccapurple and you get #663399. It works the other way too: enter any colour and the tool names it if a CSS name matches exactly, or tells you the nearest one if none does.
What are LAB, LCH and OKLCH, and do I need them?
They are colour spaces built to match how eyes work rather than how screens work, and all three are now valid CSS.
You need them if you are building a palette where several colours have to look equally light, or generating a tint scale that steps evenly by eye — jobs HSL does badly, because its lightness number does not correspond to how light a colour actually looks. If you are not doing either of those, HEX and HSL will serve you fine and you can ignore these three entirely.
Is the CMYK output ready to send to a printer?
No, and no browser tool’s is.
This is the plain arithmetic conversion with no colour profile behind it. Real ink depends on the press, the stock and the profile your printer works to, so use these numbers to get close and ask your printer for the values that matter.
Is the colour code converter free and private?
Free, with no sign-up and no limit on how many colours you convert.
Every calculation happens in your browser using JavaScript. Nothing you type is sent to a server, logged or stored, and the tool keeps working if you lose your connection after the page has loaded.