Colour picker
One colour, every code, and what goes with it.
Type hex, rgb(), hsl() or a CSS colour name — all of them work.
- hex
- rgb
- hsl
- hsv
- cmyk
- lab
- lch
- oklch
Can text be read on it
Lighter and darker
What goes with it
Complementary — the opposite
Analogous — the neighbours
Triadic — a third of the wheel each
Split complementary — either side of the opposite
Pick a colour, type one in, or lift one off your screen, and every code appears at once — hex, RGB, HSL, HSV, CMYK, LAB, LCH and OKLCH. Under that: whether text can be read on it, a run of lighter and darker steps, and the colours that go with it. Click anything to copy it.
How to use it
- Pick a colour, or paste a hex, rgb(), hsl() or CSS colour name.
- Click whichever code your tool needs to copy it.
- Scroll down for shades, matching colours, and whether text will read on it.
Why use this tool
Completely private
Everything runs inside your browser. Your files and text are never sent to a server.
Free, with no limits
No sign-up, no watermarks and no cap on how many times you can use it.
Instant results
There is no upload or queue to wait for, so results appear as fast as your device can work.
Works on any device
Runs in any modern browser on phone, tablet or desktop. Nothing to install.
Frequently asked questions
- Which format should I use?
- Hex for CSS and design tools — it is the shortest and the most widely understood. RGB where a tool asks for three numbers. HSL when you want to adjust a colour by hand, because changing one number does one predictable thing. CMYK only for print, and only as a starting point. OKLCH if you are writing modern CSS: it is the one where making a colour lighter does not also make it look different.
- What is OKLCH, and why is it here?
- A newer way of describing colour where the numbers match what your eye actually does. In HSL, two colours with the same lightness value can look wildly different in brightness — yellow at 50% looks far lighter than blue at 50%. OKLCH fixes that, which is why CSS adopted it and why palettes built in it look even. Browsers have supported it since 2023.
- Is the CMYK conversion accurate?
- It is the standard formula, and it is what most online tools give you — but no formula can be exactly right. Real CMYK depends on the press, the ink and the paper, which is what an ICC profile describes. Use these numbers to fill in a form or start a conversation with a printer; ask the printer for a proof before committing to anything that matters.
- Can I pick a colour from somewhere else on my screen?
- If you are in Chrome or Edge, yes — the Pick from screen button samples any pixel, including outside the browser. Firefox and Safari have not implemented it, so the button is simply absent there. A page cannot see your screen without the browser's help, and no amount of clever code changes that.
- What do the contrast numbers mean?
- The ratio between your colour and white or black, from 1:1 to 21:1. Body text needs 4.5:1 to meet WCAG AA, large text and icons need 3:1. It is worth checking even when you are not chasing compliance: a ratio under about 3:1 is genuinely hard to read for a lot of people in ordinary daylight.
- Is anything sent anywhere?
- No. Every conversion here is arithmetic running in your browser. There is no upload, no lookup and no account — the page works with the network off.