Why it matters
Clients often arrive with a logo, a shop front or a favourite photo and nothing else. Picking colours from it by eye with an eyedropper gets you one pixel, which is often a shadow or a highlight rather than the colour people actually see.
This tool groups every pixel into clusters in OKLab, a colour space built around how people perceive colour, so the results match what you'd point at. Then it does the part that usually gets forgotten: it checks which combinations can be used for text, so the palette is accessible from the start rather than fixed later.
How to use it
- Choose or drop an image, or use the sample photo.
- Pick how many colours you want. Six suits most brand palettes.
- Check the contrast badges on each swatch and the table of pairs that pass.
- Copy or download the CSS variables, JSON or palette image.
FAQ
Why don't the colours exactly match my eyedropper?
Each colour is the average of a cluster of similar pixels, which is closer to what you see than any single pixel. For an exact colour from a logo file, use the hex code from the brand guidelines.
Is my image uploaded?
No. It's drawn onto a canvas in your browser and read there. Nothing is sent anywhere.
Why is the image scaled down?
The tool samples a smaller copy (up to 160 pixels across) so it works instantly on phones. It makes no visible difference to the palette.
Which pairs can I use for body text?
Anything marked AA text or AAA text: a contrast of at least 4.5:1. Pairs marked Large text / UI need 24px text or bigger, or are for borders and icons.
