Color Palette from Image
Pull the dominant colours out of an image, or pick any pixel exactly. Runs in your browser — the image is never uploaded.
Click the image to pick a pixel
Export
How to Get a Colour Palette from an Image
- Drop in a photo, screenshot or logo.
- Choose how many colours to extract.
- Click a swatch to copy its hex value.
- Click anywhere on the image to pick an exact pixel colour.
- Copy the palette as CSS variables, JSON or a plain list.
Dominant colours are not the same as brand colours
A palette extractor answers "which colours cover the most of this picture". That is rarely the question when you are matching a brand. A product shot is mostly background; a logo is mostly white space. The colour you want is often a small area, and the extractor will rank it low or merge it with something nearby.
Two ways round it. Raise the colour count, which splits the image more finely and gives small areas their own swatch. Or click the exact spot with the eyedropper, which reads the pixel from the full-resolution image. For a logo, the eyedropper on a solid area is the reliable answer.
And on photographs, no single pixel is "the" colour of anything — a red car is a hundred reds, from highlights to shadow. The palette's averaged colours are usually closer to what your eye calls the colour than any one pixel is.
Turning a palette into a usable scheme
- Pick one dominant and one accent. The largest swatch is a background candidate; a saturated swatch with a small share is usually the accent.
- Check text before committing. Each swatch shows whether white or black text passes WCAG on it. Use the Contrast Checker for exact pairs.
- Extend it into shades. The Color Picker generates lighter and darker steps from any hex, for hover states and borders.
- Mute what is too loud. Colours from photos are often highly saturated; a large area of one is tiring. Lower saturation for backgrounds and keep the vivid version for small accents.
Specifications
- Accepts
- Any image
- Gives you
- On-screen palette · CSS, JSON or list to clipboard
- Where it runs
- Your browser — the file is never uploaded
- Sign-up
- None
- Cost
- Free, with no usage limits
FAQ
Is my image uploaded?
No. The colours are worked out from the image's pixels in your browser. Nothing is sent anywhere.
How are the colours chosen?
With a variant of median cut, the algorithm GIF encoders have used for decades. All the pixels start in one box of colour space; the box with the most variation is cut in two along its most varied channel, at the point that leaves each half as uniform as possible, and that repeats until there are as many boxes as colours you asked for. Cutting where colours change — rather than at the middle pixel, as classic median cut does — is what stops a flat logo producing colours that appear nowhere in it. Each colour shown is the average of one box, and the percentage is how much of the image it covers.
Why is the colour I care about missing?
Because the palette favours colours that cover a lot of the picture. A small red logo on a large grey background may be absorbed into a neighbouring box. Raise the number of colours, or click the logo with the eyedropper to get its exact value.
What does the Aa label on each colour mean?
Whether white or black text is readable on that colour, by the WCAG contrast rule — 4.5:1 for normal text. It saves a trip to a contrast checker when you are picking a background from the palette.
Is the eyedropper exact?
Yes — it reads the pixel under the cursor from the full-resolution image, not from the scaled preview, so the value is what is actually in the file. On a photo, neighbouring pixels can differ a lot; pick a few and average them by eye.
Which export should I use?
CSS variables to drop straight into a stylesheet, JSON for code or design tokens, and the plain list for pasting into a design tool.