Colour tools
Pick colours, build palettes and gradients, mix shades and check contrast or colour blindness. Free, all in your browser, with nothing to install.
All 9 tools
Contrast checker
Check whether text can actually be read on its background.
CSS gradient generator
Build a gradient that stays colourful in the middle.
Shades and tints
Build a full scale from one colour, light through dark.
Colour mixer
Mix two colours and see what you actually get.
Colour blindness simulator
See a colour the way about one man in twelve does.
Colour palettes
Browse hand-picked four-colour palettes by mood and copy any hex with a click, with each palette checked for colour-blind readers.
Palette generator
Five colours that go together. Lock the good ones, reroll the rest.
Colour picker
One colour, every code, and what goes with it.
Colour from an image
Take any colour out of a picture, or the whole palette at once.
About these tools
Picking colours by eye works until you need five of them to look like a set. These tools work in OKLCH rather than HSL, which sounds academic and matters immediately: lightness in OKLCH tracks what the eye actually sees, so five shades generated from one blue come back as five blues rather than four blues and something that has drifted towards teal.
You can pull a palette out of a photograph, build a scale from a single brand colour, convert between HEX, RGB, HSL and OKLCH, and check a pair of colours against the WCAG contrast thresholds before shipping them. Colours outside the sRGB gamut are brought back in by reducing chroma with a binary search, so the hue you chose survives instead of being clipped to something else.
Contrast is the part most sites get wrong, and it is the part with a number attached. Body text wants 4.5:1 against its background and large text 3:1 — and a colour that passes in a light theme very often fails in a dark one, because lifting a palette is not the same as mirroring it. Check both.