Colour palette from an image
Drop a photo or screenshot to pull out its main colours, then click any point on the image to pick an exact pixel. Copy HEX codes or the whole palette as CSS variables.
Drop an imageor click to choose
Picked:
Click the imageImages are analysed on your device. Nothing is uploaded.
How the palette is found
The image is shrunk to about 120 pixels across, then the colours are grouped with k-means clustering: similar pixels are pulled together and each group’s average becomes a palette colour. The percentage shows how much of the image each colour covers. More colours reveal accents; fewer give the overall mood.
Using a palette
- Pick one dominant colour for backgrounds, one for text and one or two accents.
- Check text contrast with the contrast checker.
- Blend two palette colours into a background with the gradient generator.
Frequently asked questions
Is my image uploaded?
No. The colours are calculated on your device.
Why are the colours slightly different from what I see?
Each palette colour is an average of similar pixels. Use the pixel picker for an exact value at one point.
Can I copy all colours at once?
Yes. The CSS box lists every colour as a CSS variable.