Colour Picker & Converter

Colour Picker & Converter is a workbench for one colour at a time. Drag the picker, tap a spot on a photo, paste a value or type a name like “tomato”, and the same colour appears straight away as HEX, RGB, HSL, HWB, OKLCH and CMYK. Every box is live in both directions: edit the HSL and the HEX follows, edit the HEX and the picker moves.

It is built for people who move colours between tools. Web designers get CSS that pastes cleanly, including the newer OKLCH format that modern browsers understand. Developers get the nearest CSS colour name and a scale of tints and shades as CSS variables, a Tailwind config, SCSS or JSON. “Pick from a picture” opens a photo or screenshot with a zoom loupe for exact pixels. Anyone building a brand palette gets five classic harmonies.

The contrast checker answers the question people forget to ask: can everyone actually read this? It measures your colour against a background using the WCAG formula (the Web Content Accessibility Guidelines that most accessibility laws point to), shows pass or fail for each level, and if it falls short, finds the closest version of your colour that passes. Everything happens in your browser; no colour or picture is sent anywhere.

1. Drag in the big square to choose how strong and how bright the colour is, then move the “Hue” and “Opacity” sliders. Arrow keys work too.
2. Or type into any format box, such as HEX or RGB, or press “Device picker” or “Pick from screen” where your browser offers it.
3. Or press “Open a picture” (or drop or paste one) and tap any spot on it to take that colour.
4. Press the copy button beside a format to copy it as ready-to-paste CSS.
5. Under “Tints and shades”, choose “Use in code as” (CSS, Tailwind, SCSS or JSON), then Copy or Download.
6. In “Contrast checker”, enter a background colour. If a level fails, choose a target and press “Use it” to switch to the nearest colour that passes.

• Six formats that update each other as you type: HEX (including 8-digit HEX with transparency), RGB, HSL, HWB, OKLCH and CMYK.
• Reads colours written almost any way: #27f, rgb(47 123 255 / 50%), hsl(0.6turn 100 59), all 148 CSS names, or bare numbers like 47, 123, 255.
• A picker you can use with a mouse, a finger or only the keyboard, plus your device’s own picker and, in Chrome and Edge on a computer, a dropper that picks any colour on your screen.
• The nearest CSS colour name, worked out by how alike colours look to the eye, not by raw numbers.
• Eleven tints and shades mixed in OKLab for even steps (50 to 950), exported as CSS variables, Tailwind v4 @theme, a Tailwind v3 config, SCSS or JSON.
• Pick from a picture: JPG, PNG, HEIC, WebP, SVG and more, with a zoom loupe, 1-pixel or averaged 3 × 3 and 5 × 5 samples, a row of recent picks, and a link to pull a whole palette from the same photo.
• A WCAG contrast checker with AA and AAA results for normal text, large text and interface parts, a live preview, and a one-tap fix that keeps your hue.

• WCAG ratios are never rounded up. 4.49:1 fails AA, so the checker shows two decimals rounded down.
• CMYK here is an estimate with no printer profile: for printed brand colours, ask your printer.
• In OKLCH, changing only the lightness makes a colour lighter or darker without its hue drifting the way HSL can.
• Photos are full of noise: use the 3 × 3 or 5 × 5 average when picking from skin, sky or fabric so one odd pixel doesn’t throw the colour off.