Color Picker
Pick any colour and copy it as HEX, RGB, HSL, HSV, CMYK or OKLCH. Build harmonies and a 50–950 shade scale, check WCAG contrast, preview colour blindness and pull a palette from an image.
- Screen & image picker
- 12 colour formats
- Palettes & scales
- WCAG contrast
Recent
Everything runs in your browser. Saved colours stay on this device.
Colour codes
Contrast checker (WCAG 2)
Large heading text
Normal body text looks like this. The quick brown fox jumps over the lazy dog.
Colour-blindness preview
Your colour as text and as a block on the chosen background, as seen with each type of colour vision.
Colour harmonies
Click any colour to use it – its HEX code is copied too.
How to use the colour picker
- Choose a colourDrag in the colour square, use the hue and opacity sliders, type any CSS colour, or pick one from your screen or an image.
- Copy the code you needCopy HEX, RGB, HSL, HSV, CMYK, OKLCH, a CSS variable or a Tailwind class with one click.
- Build and test a paletteUse harmonies and the shade scale to build a palette, then check text contrast and how it looks with colour blindness.
Colour formats explained
| Format | Example | Where it’s used |
|---|---|---|
| HEX | #2563EB | Web design, CSS, design tools |
| RGB / RGBA | rgb(37 99 235 / 80%) | CSS, screens, image editors |
| HSL | hsl(221 83% 53%) | CSS when you want to tweak lightness or saturation by hand |
| HSV / HSB | 221°, 84%, 92% | Photoshop, Figma and most colour pickers |
| CMYK | cmyk(84%, 58%, 0%, 8%) | Print (approximate without a print profile) |
| OKLCH | oklch(54.6% 0.215 262.9) | Modern CSS; perceptually even palettes |
Building a palette that works
- Start with one brand colour, then use the 50–950 scale for backgrounds (50–100), borders (200–300), text (700–900) and buttons (500–600).
- Use harmonies for accents. Complementary colours give strong contrast; analogous colours feel calm and related.
- Check contrast early. Body text needs at least 4.5:1 against its background for WCAG AA.
- Don’t rely on colour alone. About 1 in 12 men and 1 in 200 women have some form of colour vision deficiency, so pair colour with labels, icons or patterns.
How the contrast ratio is calculated
WCAG compares the relative luminance of two colours: (lighter + 0.05) ÷ (darker + 0.05). The result runs from 1:1 (no contrast) to 21:1 (black on white). Transparency is ignored in the contrast check, so test the final, flattened colour.
Frequently asked questions
How do I pick a colour from an image?
Drop, paste or upload an image in the image section, then hover to see a magnified loupe and click to pick the exact pixel. The tool also finds the image’s main colours automatically and shows how much of the picture each one covers.
Can I pick a colour from anywhere on my screen?
Yes, in Chrome, Edge and other Chromium browsers on desktop. Press “Pick from screen” and click anywhere on your screen. Other browsers don’t support this yet, so take a screenshot and use the image picker instead.
What is the difference between HEX, RGB and HSL?
They describe the same colour in different ways. HEX is a compact code like #2563EB used in web design. RGB lists the red, green and blue amounts from 0 to 255. HSL describes hue, saturation and lightness, which is easier to adjust by hand.
What is OKLCH and why use it?
OKLCH is a modern CSS colour format based on how people perceive lightness, chroma and hue. Changing the lightness in OKLCH keeps colours looking evenly spaced, which is why the shade scale here is built with it. All current major browsers support oklch() in CSS.
What contrast ratio do I need for accessible text?
WCAG 2 level AA asks for at least 4.5:1 for normal text and 3:1 for large text (about 24 px, or 19 px bold) and for buttons and icons. Level AAA asks for 7:1 and 4.5:1. If your colours fail, press “Fix contrast” to find the closest shade that passes AA.
How accurate is the colour-blindness preview?
It uses the widely cited Machado, Oliveira and Fernandes (2009) model for full protanopia, deuteranopia and tritanopia, plus greyscale. Real colour vision varies from person to person, so use it as a guide and never rely on colour alone to convey meaning.
Why does CMYK not match my printer exactly?
The CMYK shown is a simple mathematical conversion from screen RGB. Professional printing uses colour profiles for specific inks and paper, so ask your printer for their profile or a proof when exact colour matters.
Are my images and colours uploaded?
No. Images are read in your browser and never uploaded. Saved and recent colours are stored only in this browser, and you can clear them at any time.
Related tools
Last updated: