Color palette from image
Drop in a photo, screenshot or logo and get its main colours with percentages, exact pixel picks, and a gradient built from them. Everything runs in your browser — nothing is uploaded.
Your palette will appear here.
Getting a palette that actually works
The biggest cluster is usually the background, not the colour you remember. Look at the smaller swatches for accents — a red jacket or a neon sign might be 3% of the pixels but 100% of the mood. Use the eyedropper for single details.
For UI, pair one dominant colour with a dark and a light swatch from the same photo, then check text pairs in the contrast checker. For a background, choose two or three swatches close in lightness so the gradient stays smooth.
Questions
How do I extract colours from an image?
Drop or choose an image. The tool shrinks it to about 160 pixels wide, groups similar pixels with k-means clustering in the OKLab colour space, and shows the main colours sorted by how much of the image they cover. Click any point on the image to pick an exact pixel colour too.
Is my image uploaded anywhere?
No. The image is read and analysed entirely in your browser with the Canvas API. It never leaves your device.
Why OKLab clustering instead of RGB?
Distances in OKLab match how different colours look to people, so clusters group colours that seem alike. RGB clustering tends to merge distinct dark colours and split similar light ones.
How do I turn the palette into a gradient?
Select two to five swatches (or use the suggested light-to-dark order) and press “Make gradient”. It opens in the gradient generator with the colours as stops, ready to adjust and export.
What image formats work?
Anything your browser can display: JPG, PNG, WebP, GIF, AVIF and usually HEIC on Safari. Very large photos are fine because only a small downscaled copy is analysed.