Colour Converter Studio
Type a hex code, a CSS keyword or a whole oklch() function and get every other notation back instantly. Then build a ramp, check the contrast, simulate how it reads for colour-blind viewers, and take the palette with you.
Hex with 3, 4, 6 or 8 digits plus rgb() and hsl() are understood without any browser help.
CMYK here is the plain arithmetic conversion, not an ICC separation. A press-ready CMYK depends on the paper, the ink and the output profile, and cannot be derived from an sRGB value on its own.
Large heading at 24 pixels
Sub-heading at 16 pixels, semi-bold
Body copy at 13 pixels. This is the size that decides whether a colour pair is actually usable.
Flipped, using the background as the text colour: Lc -60.3
Below ΔE 0.05 two swatches are effectively the same colour for that viewer, so a palette that relies on telling them apart will break. The simulation follows Viénot, Brettel and Mollon (1999) and is applied in linear light.
Distance is ΔE in OKLab, where roughly 0.02 is the point most people start to see two swatches as different colours. Click a row to jump to that exact colour.
How it works
Bring a colour in
Type any CSS notation, use the screen eyedropper, paste a whole palette, or open an image and click the pixel you want.
Shape it
Lightness, chroma and hue sliders that behave the same on a yellow as on a blue, plus ramps, harmonies and blending.
Check it
WCAG 2.1 and APCA against any background, and a colour-blindness simulation that tells you when two swatches collapse into one.
Take it with you
Copy a single notation, export CSS, Tailwind, SCSS, JSON, SVG or a swatch sheet, or hand the palette to the next tool.
Every CSS colour syntax
Hex with 3, 4, 6 or 8 digits, keywords, rgb(), hsl(), hwb(), lab(), lch(), oklab(), oklch(), color-mix() and display-p3. The browser's own parser does the reading, so nothing is left out.
Ramps that stay even
Eleven steps generated in OKLCH, so each step looks a consistent distance from the last instead of the uneven jumps an HSL ramp produces.
WCAG 2.1 and APCA
The classic ratio plus the signed Lc value from the WCAG 3 draft, measured against any background you choose, not just white and black.
Colour-blindness check
Protanopia, deuteranopia and tritanopia simulated in linear light, with the smallest distance between any two swatches so you know when a palette collapses.
Eyedropper and images
Pick a colour from anywhere on screen where the browser allows it, or open an image, zoom into the pixel under your cursor and take its exact value.
Harmonies and blending
Complementary, analogous, triadic, split, tetradic and monochrome sets rotated in OKLCH, plus perceptual blending along the short hue arc.
Export anywhere
CSS custom properties, a Tailwind @theme block, SCSS variables, JSON, an SVG or PNG swatch sheet, and a GIMP palette file.
Nothing leaves the tab
No upload, no API call, no account. Every conversion, every contrast figure and every palette is computed by your own browser.
Instant local processing
Every conversion is arithmetic on three numbers, so there is nothing to wait for and nothing to send anywhere. Reading your input is handed to the browser's own CSS engine, which is why keywords, color-mix() and wide-gamut notations are understood rather than rejected. The perceptual work — OKLCH ramps, gamut mapping, ΔE distances, colour-blindness simulation — is a few hundred floating-point operations, and even extracting a palette from a large photo is a k-means pass over a downsampled copy that finishes in well under a second.
The awkward part of colour work is rarely the conversion itself: it is producing a scale that reads evenly, proving a pair of colours is legible, and getting the result into the shape your codebase expects. This tool anchors an eleven-step ramp on the colour you already have, tells you which steps had to be pulled back into sRGB and by how much, names the closest CSS keyword and Tailwind token with a measured distance, and exports the whole palette as custom properties, a Tailwind theme block, SCSS, JSON or a swatch sheet.
There is no server side to this tool. Colours you type, palettes you paste and images you open stay in the tab: an image is decoded into a canvas that never leaves your machine, and closing the tab discards everything. The only thing that travels is what you choose to put in the address bar — the palette is encoded there so you can share a link, and nothing else about your session is recorded.
Frequently asked questions
QWhich colour formats can I paste in?+
Hex with 3, 4, 6 or 8 digits, the 148 CSS keywords, rgb(), rgba(), hsl(), hsla(), hwb(), lab(), lch(), oklab(), oklch(), color-mix() and color(display-p3 …). Input goes through the browser's own CSS parser, so anything your browser accepts in a stylesheet works here. Without a browser parser the tool still reads hex, rgb() and hsl().
QWhy does the tool prefer OKLCH over HSL?+
In HSL, two colours with the same lightness value can look wildly different in brightness — a yellow at 50% reads far lighter than a blue at 50%. OKLCH is built so that its lightness matches what the eye reports, which is why the ramps, harmonies and blending here all rotate and interpolate in that space.
QWhat does the ΔE number mean?+
It is the distance between two colours in OKLab. Around 0.02 is where most people start to see two swatches as genuinely different colours, so it is a useful yardstick: it tells you how far a ramp step drifted when it had to be squeezed back into sRGB, how close the nearest Tailwind token really is, and whether two palette colours survive a colour-blindness simulation.
QIs the contrast checker WCAG compliant?+
The WCAG 2.1 ratio is computed exactly as the specification defines it, against whatever background you pick, and the badge distinguishes body text from the looser large-text threshold rather than showing a single pass mark. Alongside it you get APCA, the perceptual measure proposed for WCAG 3 — useful in practice, but still a draft and not a conformance criterion.
QIs the CMYK output ready for print?+
No, and no browser tool's is. What you get is the standard arithmetic conversion, which is fine for a rough idea or for software that expects those four numbers. A real separation depends on the paper, the inks and an ICC output profile, so it has to be done in your layout or imaging application.
QDoes anything I paste get uploaded?+
No. There is no server component, no analytics on your colours and no network request at any point in the conversion. Images are decoded locally into a canvas and discarded when you close them. The palette is written into the page URL so that you can share or bookmark it — that is the only place your colours are stored, and it stays on your machine unless you send the link yourself.