Colour Converter
Every format for one colour, including OKLCH.
Colour
Every format
On the CMYK figures: these are the standard naive conversion, with no colour profile applied. They are useful for a rough idea and they are not what a press will produce. For anything going to print, convert in your layout application against the profile the printer specifies.
Paste a hex code or pick a colour and get it back in every format you need — HEX, RGB, HSL, OKLCH and CMYK. OKLCH is included because it is now the sensible way to work with colour in CSS, and CMYK is included with a warning, because a conversion without a colour profile is an approximation rather than an answer.
Why use this tool?
Five formats at once
HEX, RGB, HSL, OKLCH and CMYK, each one click to copy.
Honest about CMYK
No profile means no real conversion. The figure is shown with that stated rather than implied away.
Out-of-gamut warnings
Tells you when an OKLCH value cannot actually be displayed in sRGB, rather than silently clipping it.
Nothing transmitted
Runs in your browser. No colour value is ever sent anywhere.
How this colour converter works
A hex code is parsed first, expanding three-digit shorthand so #fff and #ffffff behave identically, and rejecting anything that is not six valid hex digits rather than guessing at it. From there every other format is derived from the same RGB triple, so the five rows always describe one colour rather than five roundings of it.
OKLCH is the interesting conversion. sRGB values are first linearised — undoing the gamma curve that display encoding applies — then transformed through the LMS cone response space into OKLab, and finally expressed as lightness, chroma and hue. The round trip has been verified across four hundred random colours with a maximum drift of 0.0003 of a channel, which is well below anything a screen could show.
CMYK is the one to be careful with, and this page says so rather than burying it. The formula used here is the standard profile-free conversion every online tool uses: it derives black from the brightest channel and the other three from what remains. It takes no account of ink, stock, dot gain or press, so it will not predict what comes off a machine. Use it to plan; convert against your printer's ICC profile to specify.
How to use it
Step 1: Pick or paste a colour
Type a hex code or use the picker. Three-digit shorthand works.
Step 2: Read across the formats
Each row is one click to copy.
Step 3: Mind the CMYK caveat
Use it to plan, not to specify. Convert against your printer's profile for anything going to press.
Example usage
- Picking a text colour
- Convert a brand colour to OKLCH, drop the lightness until the contrast checker passes, and convert back to hex for the stylesheet.
- Matching across media
- Get the same colour in hex for the website and an approximate CMYK for the deck, with a clear note that the print version needs a proper conversion.
- Checking a value is displayable
- Paste an OKLCH value from a design token file and see immediately whether it falls outside sRGB, before it silently clips in the browser.
What a hex code does not tell you
A hex code is only half a specification. It gives three numbers between 0 and 255; it says nothing about what colour space those numbers are to be read in. Almost everything on the web assumes sRGB, and that assumption is so universal it has become invisible — but it is still an assumption, and it is the reason a colour can be objectively correct and still look wrong.
Modern displays made this visible. A wide-gamut screen can show colours well outside sRGB, and CSS can now address them directly through Display P3 and OKLCH. The same three numbers interpreted in P3 rather than sRGB give a noticeably more saturated colour. That is why a brand red can look muted on one machine and electric on another when nothing about the file has changed.
The practical rule is that a hex code is a safe, portable, slightly conservative way to specify a colour, and that is exactly why it has survived. If you need a colour sRGB cannot reach, you have to say so explicitly with a wider-gamut notation — and accept that displays which cannot show it will clip to the nearest thing they can, which is what the out-of-gamut warning on this page is telling you about.
Frequently asked questions
Why is my CMYK different from Photoshop's?
Because Photoshop converts against a colour profile — an actual model of ink on a particular stock — and this uses the standard profile-free formula. Both are 'correct' for what they are; only one of them predicts what a press will do.
What does out-of-gamut mean?
That the colour exists in OKLCH but cannot be shown in sRGB. The hex shown is the nearest displayable colour, not an exact match, so the two will not look identical.
Should I be using OKLCH in CSS?
Increasingly, yes. Browser support is good, and it makes lightness and hue behave predictably in a way HSL never has — particularly when generating variations from a base colour.
Why does the same hex code look different on two screens?
Because a hex code specifies numbers, not an appearance. Turning those numbers into light depends on the panel, its calibration, its brightness and the ambient room. A hex code is a reliable instruction and an unreliable prediction, which is why print work uses profiles and why critical colour gets checked on hardware rather than approved over a screenshot.
What is Display P3 and should I be using it?
A wider colour space than sRGB, supported by most recent phones and laptops. It is worth using when a colour genuinely needs to be more saturated than sRGB allows, declared so that sRGB displays fall back gracefully. For the vast majority of interface work sRGB is entirely sufficient and simpler to reason about.
Is HSL still worth using?
For quick manual tweaking, it is fine and it is everywhere. For anything generated — ramps, harmonies, state variations — OKLCH is materially better, because HSL's lightness is a mathematical midpoint rather than a perceptual one. That single difference is why HSL-derived palettes so often contain one colour that glares and one that vanishes.
Related tools
Contrast Checker
Five WCAG checks with a live preview of the actual text.
Colour Blend Generator
Smooth ramps between two colours that keep their saturation.
CSS Gradient Generator
CSS gradients in both spaces, shown side by side.
Browse every tool in Colour Tools.