This tool runs entirely in your browser. Nothing you paste is uploaded.
How you can check →Color Converter
Color & DesignConvert HEX, RGB, HSL, OKLCH, CMYK and more, entirely in your browser — and see exactly which printed value survives the trip back.
Paste any color
Hex, rgb(), hsl(), hwb(), oklch(),
oklab(), lch(), lab(), color(display-p3 …),
or a CSS named color like rebeccapurple.
The native swatch above has no alpha channel — this rail is the only way to pick one.
Tints and shades
A quick preview of the perceptual ramp this color would produce. Click a step to open the full scale generator with this color pre-filled.
Formats
Off by default: the legacy comma form (rgb(59, 130, 246)) is what most tools
and codebases still print. Whichever you pick, the receipt below grades the exact string
shown — and offers the value that round-trips when this one doesn't.
Waiting for a valid color — the values below are from the last one entered.
This is device-independent arithmetic (K = 1 − max(R,G,B)), not a real
separation for any printer, paper or ink. It models nothing about a print process — ask
your printer for their ICC profile and convert with software that supports it for
anything that will actually be printed.
The honesty row
HSL's "lightness" and perceptual lightness are not the same number — this is why HSL-based ramps and gradients often look uneven.
Need a specific foreground/background pair, alpha, or the APCA number? Use the contrast checker.
Both-theme preview
This site ships two themes — a color that reads well on one may not on the other.
Parchment
Ember
No network activity while you use this tool Show the numbers
- Requests to any other server
- 0
- Requests since you started typing
- —
- Same-origin requests
- 0
Counted live by your browser's own Performance Timeline — the same data the DevTools Network panel reads. It cannot see what a browser extension does, and it is not meant to replace checking for yourself: here is how, in thirty seconds .
What this converts, and what is lost doing it
Every displayed value on this page is the value the input was actually converted from,
printed at a precision chosen so it round-trips where that's possible — and where it isn't,
the receipt underneath says so and by how much. Most converters keep an unrounded value in
memory and derive everything from that, so the page looks internally consistent while the
printed strings themselves don't agree with each other. A concrete example:
#7f3fbf converts to hsl(270 50% 50%) when printed to whole numbers,
but parsing that string back gives you #8040bf — off by one unit each of red and
green. Printing HSL at higher precision (hsl(270 50.394% 49.804%)) closes the
gap, and this page finds and shows the smallest precision that actually round-trips for the
color you entered, rather than assuming one fixed digit count is always enough.
Why HSL lightness is not lightness
hsl(60 100% 50%) (yellow) and hsl(240 100% 50%) (blue) both claim
50% lightness. Their real WCAG relative luminances are 0.93 and
0.07 — a contrast ratio of 8:1 between two colors HSL calls
equally light. HSL's "L" is a geometric average of the RGB channels, not a measure of how
light a color actually looks; that's why ramps and gradients built by walking HSL lightness
often look uneven, with some hues appearing to jump in brightness. OKLCH's lightness channel
is built specifically to track perceived lightness, which is why this page prints WCAG
luminance, OKLCH L and HSL L side by side rather than just one of them.
What CMYK here does and does not mean
The formula behind the CMYK value shown above (K = 1 − max(R,G,B), then C/M/Y
from what's left) is pure arithmetic with no connection to any real printer, paper or ink —
every browser-based CMYK converter, including this one, uses the same formula. Its perfect
reversibility back to the original RGB value is itself the proof that it isn't modelling a
real separation: an actual print process loses information (dot gain, ink limits, paper
absorption) and can't be undone exactly. For color that needs to match on paper, get the
destination printer's ICC profile and convert with software that supports it — this number is
a rough guide, not a print spec.
When to use OKLCH
OKLCH became relevant to everyday CSS once Chrome, Firefox and Safari all shipped support for it across 2023, and Tailwind CSS v4 made it the default color space for its palette. Its appeal is that lightness, chroma and hue behave the way they visually look — increasing lightness while holding chroma and hue fixed produces an even, predictable step, which HSL cannot promise. It's also why this tool uses OKLCH internally for gamut mapping and the tint ramp below: chroma can be reduced without shifting hue, which per-channel RGB clipping cannot do.
Common use cases
- Converting a design tool's hex export into the OKLCH or HSL a CSS custom property needs
- Checking whether a printed HSL or hex value actually matches the color you started with
- Getting a rough CMYK approximation while knowing exactly what it doesn't promise
- Seeing whether a brand color falls outside sRGB, and what it maps to when it does
- Grabbing a quick tint/shade ramp, then opening the scale generator for the full 50–950 set with a contrast matrix
- Checking a color's contrast against black and white before sending it to the contrast checker for a specific pair
Frequently asked questions
- Why does the same color print different HSL and OKLCH lightness?
- HSL lightness isn't perceptual lightness — it's a geometric average of the RGB channels. hsl(60 100% 50%) (yellow) and hsl(240 100% 50%) (blue) both claim 50% lightness, but their real relative luminance is 0.93 and 0.07, an 8:1 contrast difference between two colors HSL calls equally light. OKLCH's L is built to track how light a color actually looks, which is why this page shows both side by side.
- What does 'round-trips exactly' mean?
- It means the printed string was re-parsed and produced the exact same 8-bit sRGB value as the color you entered. Many converters print a rounded value (like whole-number HSL) while quietly continuing to compute everything else from the unrounded number in memory — so the page looks consistent, but copying that printed string into another tool gives you back a slightly different color. This page checks the actual printed string, and says so when it doesn't round-trip and by how much.
- Is the CMYK value accurate for printing?
- No, and no converter's naive CMYK is. The formula used here (and everywhere else online) is pure device-independent arithmetic with no relationship to any real printer, ink or paper — its perfect reversibility back to the original RGB is actually the proof it isn't modelling ink, because a real separation loses information. For print-accurate color, ask your printer for their ICC profile and convert with software that supports it.
- What does 'outside sRGB, fits Display P3' mean?
- Most monitors only display the sRGB gamut, but newer displays (many phones, recent Macs) support the wider Display P3 gamut. A color outside sRGB has to be gamut-mapped to display on an ordinary screen — this tool reduces chroma in OKLCH space (holding lightness and hue fixed) rather than clipping each RGB channel independently, which is what most tools do and what visibly shifts the hue.
- Why do the swatches at the bottom link to the scale generator instead of showing more detail here?
- They're a quick preview of the tint/shade ramp this color would produce — the full scale generator shows the per-step gamut report and a contrast matrix, which needs more room than a quick preview strip.
Explore more tools
Check any foreground/background pair against WCAG AA and AAA, composite alpha against a backdrop, and get a same-hue fix that passes.
Turn one seed color into a 50–950 tint/shade ramp with even OKLCH steps, an explicit chroma taper, and a contrast matrix.
Build linear, radial and conic CSS gradients, and see the same stops fade through grey in sRGB or stay vivid in OKLCH.