Image color palette generator
Updated Nothing is uploaded
Pull a color palette out of a photo, screenshot or brand image. Choose how many colors you want, click any swatch to copy its HEX code, and export the whole palette for CSS, Tailwind or SCSS.
How to get a color palette from an image
- Choose an image (a sample sunset is loaded).
- Set the number of colors — 5 or 6 is a classic palette.
- Click a swatch to copy its HEX code; the bar shows how much of the image each color covers.
- Pick an export format and copy or download it.
How the colors are chosen
The image is sampled and grouped with k-means clustering in the OKLab color space, which measures color differences the way the eye perceives them. Each swatch is the average color of one cluster, and the percentage is the share of pixels in it — so you get representative colors, not just the most frequent exact pixel values.
Export example
:root {
--palette-100: #f97316;
--palette-200: #1e3a8a;
--palette-300: #134e4a;
}Turning a palette into a design system
- Use the most common neutral as background and the most saturated color as the accent.
- Check text contrast: WCAG AA needs 4.5:1 for body text. Swatch labels switch between black and white using the WCAG luminance formula.
- Need the exact color of one spot? Use the image color picker.
Private by design
Everything runs in your browser — your images are never uploaded, stored or seen by anyone.
Related tools
Frequently asked questions
Why do I get slightly different colors than another tool?
Tools differ in color space and algorithm. Clustering in OKLab averages similar shades, which gives a cleaner, more usable palette than counting exact pixels.
Are transparent pixels counted?
No. Pixels that are more than half transparent are ignored.
Can I use the Tailwind export directly?
Yes — paste the object into theme.extend.colors in tailwind.config.js, or the @theme block into your CSS for Tailwind v4.
Your business here? Sponsor this tool from $9/week. See placements