Color picker and converter

Type or pick a color, read it back in twelve notations, build a harmony scheme and a 50-900 scale, and check its WCAG contrast.

How to Copy the color

1
Pick a color or paste a value
Type any notation a browser understands: a hex code, rgb(), hsl(), oklch(), even a CSS color name. The text field is the main control here; the swatch and the eyedropper are shortcuts to the same value.
2
Copy it in any format
All twelve notations are listed at once with a copy button beside each. Nothing is hidden behind a dropdown, so converting HEX to RGB takes one click rather than three.
3
Export the palette as CSS or JSON
The base color, its ten-step scale and any colors lifted from an image go out together as CSS custom properties, a Tailwind theme fragment, SCSS variables or plain JSON.

Why the working space is OKLCH

HSL has one convenient property and one serious flaw. The convenience is that hue, saturation and lightness are separate numbers you can reason about. The flaw is that its lightness is not the lightness you see: hsl(60 100% 50%) is a bright yellow and hsl(240 100% 50%) is a dark blue, despite both claiming fifty per cent. That is why rotating hue in HSL produces harmony schemes where one swatch jumps out and another disappears. OKLCH fixes it. Its lightness tracks human perception, so shifting only the hue really does hold the brightness steady. Every scheme and every scale on this page is computed there and then converted back to sRGB for output.

What the contrast numbers mean

WCAG expresses contrast as a ratio between the relative luminance of two colors, from 1:1 for identical colors to 21:1 for black on white. Body text needs 4.5:1 to pass AA. Large text (18.66px and up, or 14px bold) and interface elements such as icons and input borders need 3:1. AAA asks for 7:1 on body text. These are not stylistic preferences: they are the difference between a page that is readable in sunlight or with imperfect vision and one that is not. When a pair falls short, the button beside the verdict walks the lightness down in OKLCH until it passes, so you get the nearest compliant version of your own color rather than a different one.

Palettes lifted from a photograph

Upload an image and its dominant colors are extracted by median cut: the cloud of pixels is repeatedly split along whichever channel varies most, and the average of each resulting box becomes a swatch. Near-duplicates are then dropped using CIEDE2000, the perceptual distance metric, so you get six distinct colors rather than six shades of the same sky. The picture is scaled down to 400 pixels first and never leaves your browser.

Colors and images stay in this tab

Every conversion is arithmetic done in JavaScript on your own machine; there is no API call behind any of it. An image you drop in for a palette is decoded, scaled and sampled locally, and is never uploaded or stored. Close the tab and nothing remains.

Frequently asked questions

Why is OKLCH better than HSL?

Because its lightness matches what your eye reports. In HSL, two colors with the same lightness value can look wildly different in brightness, which ruins harmony schemes and tonal scales. OKLCH is perceptually uniform by construction, so equal steps look equal.

Why is the CMYK value only a reference?

Real CMYK separation depends on the press, the ink and the paper, all described by an ICC profile. The value here comes from the simple arithmetic conversion, which is fine for a rough idea and wrong for a print run. Ask your printer for the profile-corrected numbers.

How do I read a contrast ratio like 4.5:1?

It compares the luminance of two colors. 4.5:1 is the WCAG AA minimum for body text, 3:1 covers large text and interface elements, and 7:1 is AAA. Higher is more readable; 21:1 is black on white.

Does the eyedropper work in Safari and Firefox?

Not yet. The EyeDropper API is a Chromium feature. In other browsers the button tells you so and points you at the image route instead: upload a picture and take the color from the palette it produces.

How do I get a palette out of a photo?

Open the settings, choose an image, and pick how many colors you want between three and twelve. The dominant colors appear as swatches you can copy individually or export along with everything else.

Is my image uploaded anywhere?

No. It is decoded by your browser, drawn to a canvas at 400 pixels and sampled there. No part of it is transmitted, and the file is never written to storage.

What is the 50-900 scale for?

It is the tonal ramp that design systems and Tailwind expect: ten steps of one hue from near-white to near-black. Chroma is eased off at both ends, because full saturation at very high or very low lightness falls outside sRGB and comes back muddy.