colour tool
Colour converter
Paste any colour, or pick one on a plane that draws the real edge of what a screen can show, and read the same colour in nine notations at once with a copy button on every line.
Runs on your device. Nothing is uploaded.
Loading the tool…
How to use it
- 1
Paste anything
Hex, rgb(), hsl(), oklch(), lab() or a CSS name such as rebeccapurple. The field reads all of them, with or without an alpha value.
- 2
Or pick on the plane
Lightness runs up, chroma runs across, and the hue slider under it moves the whole plane. The chequered area is the part of this hue an sRGB screen cannot reach.
- 3
Read every notation at once
Nine rows update live. Tap any one to copy it. There is nothing to submit and no format menu to hunt through.
- 4
Check it before you ship it
The card shows the closest CSS name and the contrast on white and on black, so you know straight away whether the colour can carry text.
Why the picker is an OKLCH plane
HSL says every hue can be equally saturated and that fifty per cent lightness means one thing. Neither is true. A pure yellow and a pure blue are both hsl lightness fifty and one is blinding while the other is nearly black, which is why darkening a brand colour in HSL shifts its hue and wrecks its readability. OKLCH separates perceived lightness from chroma properly, so a ramp built by moving one number stays the same colour and steps evenly. It is why the CSS Color 4 space has been taking over design systems.
What the chequered area means
Every hue has a different maximum chroma, and that maximum changes with lightness. The plane draws the real boundary for the hue you are on: inside it is a colour your screen can produce, and the chequered region is a colour that exists in OKLCH but not in sRGB. Move the hue slider and watch the shape change. That is not a limitation of this page, it is the shape of what a normal display can do, and it is the reason a chroma that works for blue clips for green.
The CMYK number, honestly
The conversion here takes black as one minus the largest channel and derives the other three from it. That is the formula every quick converter uses and it is device independent, which is another way of saying it does not describe any real printer. A genuine CMYK value depends on the press, the ink, the paper, the total ink limit and how much black is substituted for the other three. If the job is going to print, hand your printer the RGB or Lab value and let their profile do the conversion.
Everything happens in this tab
The maths runs in your browser and no request is made after the page loads. The address bar carries the current colour, so a link reopens exactly what you are looking at, and that link is the only thing that ever leaves the page, only if you copy it and send it yourself.
Limits
- The CMYK figure is the plain arithmetic conversion with no ICC profile behind it, so it is a starting point rather than a printable value.
- The plane and the ledger are sRGB. A colour pasted as an out of gamut oklch() has its chroma pulled back to the edge, and the page says so.
- The closest CSS name is the nearest of the 147 keywords by CIEDE2000, so it is a label, not an exact match.
- Your screen is not calibrated, so the swatch is an approximation of the colour even when the numbers are exact.
What it does not do
- It does not convert to a named print standard such as Pantone.
- It does not build a full theme. The palette extractor assigns roles.
- It does not check a colour pair against the accessibility thresholds. The contrast checker does.
Questions people ask
Why is OKLCH replacing HSL?
Because HSL lightness is not perceptual. Two colours at the same HSL lightness can look wildly different in brightness, and adding ten per cent lightness moves blue and yellow by different amounts, which is why generated palettes drift. OKLCH lightness matches what the eye reports, so a scale built by stepping one number is even, and a hue change at fixed lightness keeps the text readable.
What is chroma and how is it different from saturation?
Saturation in HSL is a percentage of whatever that hue can manage, so a hundred per cent means something different for every hue. Chroma is an absolute amount of colourfulness, which is why the maximum differs per hue and why the plane has a curved edge. It runs from zero at grey to roughly 0.37 for the most vivid colours a screen can show.
Can I trust the CMYK values for printing?
Treat them as a rough starting point. Without an ICC profile there is no press, no paper and no ink limit in the calculation, so the same numbers land differently on coated stock than on newsprint. For anything where colour matters, send your printer the RGB or Lab value and let their profile convert it, or ask which profile they use and convert against it.
Why does my pasted oklch() come back different?
Because the chroma you asked for does not exist at that lightness and hue on an sRGB screen. Rather than show you a colour nobody can see, the page pulls chroma back to the edge of the gamut and tells you where the edge is. That is the same thing a browser does with an out of gamut oklch() in a stylesheet, so what you see is what would render.
How is the closest CSS name chosen?
By converting your colour and all 147 CSS keywords to CIE Lab and taking the smallest CIEDE2000 difference, which is the industry measure of perceived colour difference. The card shows how far away the match is. Under about one unit it is effectively the same colour, and above five or so it is a family label rather than a match.
What are the contrast figures on the card for?
They are the quickest sanity check there is. Body text needs four and a half to one and large text needs three, so a colour that manages neither on white nor on black cannot carry text at all and is only ever a fill. If you need to check it against a specific background rather than the extremes, use the contrast checker.
Does this send my colour anywhere?
No. Every conversion is arithmetic done in this page and there is no request after the page loads. The colour is written into the address bar so the link reopens the same view, which is useful for sending a colour to a colleague, but nothing is transmitted unless you copy that link and send it yourself.
Use this colour on something
Take what you made here into flyers.
Create a flyer with OneCraftRelated tools
- Contrast checkerSet a text colour and a background and read the WCAG ratio on a live specimen, with a pass or fail attached to every size from 30px down to 13px.
- Palette extractorCluster a photograph in CIE Lab and get the colours it is made of, each with its share of the pixels and a suggested design role. Runs in your browser.
- Colour picker from imageDrag a magnifier across a picture and read the pixel under it as hex, RGB, HSL and OKLCH, with sample averaging, arrow key nudging and a history of picks.
- DPI calculatorEnter a pixel size and a print size and see the sheet drawn at real proportions, the area your file covers sharply, and a plain verdict on whether it will do.
Written and checked by the OneCraft team. Last checked .