One colour, six ways of writing it down
A colour on a screen is three numbers: how much red, green and blue each pixel emits. Every notation on this page describes that same triple, so converting between them changes the spelling and never the colour.
#c46895 → rgb(196 104 149) → oklch(63.6% 0.128 350.675) — one colour, three spellings of it
Which one you reach for depends on what you are about to do. HEX is the shortest thing to paste into a design file; HSL is the one to nudge when you want the same hue a little lighter; OKLCH is the one to build a scale in, because equal steps in it look like equal steps; CMYK is the one your print shop asks for. The page holds a single colour in memory and renders all six at once, so nothing drifts between them — and nothing you paste is ever sent anywhere.
The six notations
What each model measures, and the job it is actually good at.
| Model | Channels | Best for |
|---|---|---|
| HEX | #RRGGBB, #RRGGBBAA | Pasting anywhere. The shortest unambiguous form, and the one every design tool accepts. |
| RGB | 0–255 each | Talking to code that manipulates pixels directly — canvas, image processing, shaders. |
| HSL | 0–360°, 0–100%, 0–100% | Hand-tuning. Hold the hue and move lightness to get a tint or a shade of the same colour. |
| HSV | 0–360°, 0–100%, 0–100% | Colour pickers. Saturation and brightness stay independent, which is why the square above uses it. |
| CMYK | 0–100% each | Print handoff. A rough separation into cyan, magenta, yellow and key black. |
| OKLCH | 0–100%, 0–0.4, 0–360° | Building scales and palettes. Equal steps in lightness look equal, which HSL cannot promise. |
OKLCH can describe colours no ordinary screen can show. When a value falls outside sRGB, the tool walks its chroma down until it fits rather than clipping the channels — clipping shifts the hue, which is exactly what makes a hand-built scale look wrong at its saturated end.
The CMYK figures here are the device-independent conversion every design tool shows, not a colour-managed separation. A real print profile needs an ICC transform and the paper stock it will be printed on; treat these numbers as a starting point to hand to a printer, not as the final plate values.
Every control on the page
Nine controls, and what each one is for.
| Control | What it does | Reach for it when |
|---|---|---|
| Colour field | Reads HEX, RGB, HSL, HSV, CMYK, OKLCH or a CSS keyword and tells you which one it saw. | You already have a value and want it in another notation. |
| Saturation square | Sets saturation left to right and brightness bottom to top, at the current hue. | You are looking for a colour rather than converting one. |
| Hue slider | Sweeps the full 360° of hue without touching saturation or brightness. | You have the right tone and want a different colour family. |
| Opacity slider | Sets alpha from fully clear to fully opaque, carried into every notation that has room for it. | You need a translucent overlay, scrim, or tint. |
| CSS notation | Switches the RGB, HSL, HSV and CMYK rows between the modern space-separated form and the legacy comma form. | Your codebase has a house style, or you are supporting a browser that predates the modern syntax. |
| Hex case | Writes hex digits in lower or upper case. | Your linter or design system insists on one of them. |
| Random | Jumps to a random colour drawn away from the washed-out greys a uniform draw would land on. | You want a starting point rather than a specific colour. |
| Pick | Opens the browser's eyedropper and reads a pixel from anywhere on your screen. | The colour you want is on screen but not in a file you can read. |
| Export | Downloads a stylesheet holding the colour, the other five notations as a comment, and the whole generated scale as custom properties. | You are ready to drop the scale into a theme. |
CMYK is the one row that cannot carry opacity — there is no alpha channel in the model. When the colour is translucent, that row says so rather than silently pretending the colour is solid.
The notation switch deliberately leaves OKLCH alone. CSS has never defined a comma form for it, so writing one would produce a declaration no browser accepts.
Out-of-range channels are clamped rather than rejected, which is what a browser does with rgb(300 0 0). Pasting what a stylesheet actually contains should show you what the browser actually renders.
The defaults are modern notation and lower-case hex, matching what CSS Color 4 and most linters prefer. Both settings change the spelling only; neither one touches the colour itself, and neither is carried into the eyedropper or the palette browser.
Contrast, and what the grades mean
WCAG measures legibility as a ratio between the relative luminance of two colours, running from 1:1 for identical colours to 21:1 for black on white. Body text needs 4.5:1 to reach AA and 7:1 to reach AAA. Large text — roughly 24px, or 19px bold — only needs 3:1. Icons, borders and focus rings need 3:1 under Success Criterion 1.4.11.
The panel checks your colour as a background against the two text colours every design starts from. It grades on the exact ratio and only rounds afterwards: a pairing at 4.497:1 displays as 4.50 but is still a failure, and showing it as a pass would be worse than showing nothing.
Opacity is left out of the calculation on purpose. A translucent colour's real contrast depends on whatever sits behind it, which this page cannot know. If you are building a scrim, flatten it against its actual backdrop first and check that colour instead.
How the generated scale is built
The ladder borrows its proportions from Tailwind's own palette rather than inventing them. Each rung takes a reference family's lightness outright, and scales your colour's chroma by that rung's share of the family's 500 — so the pale end stays pale without turning muddy, and the dark end keeps its identity.
Every step is computed in OKLCH. That matters: an HSL lightness ramp bunches the mid tones together and washes out both ends, because HSL lightness is not perceptual. Stepping through OKLCH gives you rungs that actually look evenly spaced.
The outlined rung is whichever step sits nearest your colour on the lightness axis, so you can see where what you picked would land in a Tailwind-shaped theme. Export writes the whole ladder out as custom properties, ready to paste into a :root or @theme block.
Where the palettes come from
The Tailwind swatches are read straight out of the stylesheet shipped with Tailwind CSS 4.3.3 in this project, not transcribed from documentation. They are the exact OKLCH values your build compiles, which is why the closest-match badge can be trusted against a real theme.
The CSS keywords are the full set defined by CSS Color Module Level 4 — the ones you can write as tomato or rebeccapurple in a stylesheet. Several are aliases of each other: aqua and cyan are the same colour, as are grey and gray, magenta and fuchsia.
Closest-match distance is measured in OKLab rather than RGB. RGB distance calls a pair of dark blues further apart than a pair of light greens that plainly differ, which produces obviously wrong answers; OKLab tracks what the eye actually reports.
What people use it for
Translating a handoff. A designer sends HSL, the stylesheet wants OKLCH, and the icon export wants HEX. Paste once and copy whichever row the next tool needs.
Checking a brand colour before committing to it. Drop the hex in, look at the contrast panel, and find out immediately whether body text will be legible on it or whether it can only carry headings.
Building a theme from a single colour. Pick the brand hue, take the generated 50–950 ladder, and export it as custom properties instead of hand-tuning eleven values.
Nothing you paste leaves the page. There is no upload, no request, and no log — the whole conversion is a few hundred lines of arithmetic running in your own browser.
Frequently asked questions
oklch() in CSS.?color= to the URL with any value the field accepts, remembering to encode the hash as %23 — /tools/color?color=%23c46895 works, as does /tools/color?color=tomato. You can pin the notation and hex case the same way with ?notation=legacy and ?hexCase=upper.EyeDropper API, which today means Chrome, Edge and other Chromium-based browsers on the desktop. Everywhere else the button is not rendered at all, rather than shown and then failing when pressed.