Drop any image โ get its real dominant colours as CSS variables you can paste straight into a project.
๐ Pixels never leave your browser โ no upload, no account.
You have a screenshot of a site you like, a moodboard, or a product photo, and you want its colours in your code โ not read off with an eyedropper one pixel at a time. This palette extractor reads the whole image and returns the colours that actually dominate it, already formatted as CSS custom properties, a Tailwind colour block or plain JSON.
The colours come from median-cut quantisation โ the same family of algorithm a GIF encoder uses. Every pixel goes into one colour box; the box is repeatedly split along its widest channel until you have as many boxes as you asked for; each box returns its average. That means the palette reflects the true distribution of the image, so a photo that is 60% sky gives you that blue with the weight it deserves. Each swatch shows its share of the image and its HEX, RGB and HSL values.
A palette is useless if you can't put text on it. Every swatch shows its WCAG contrast ratio against white and black, so you can see at a glance which colour can carry body text (4.5:1), which is only safe for large headings (3:1), and which is decoration only. The Ignore near-greys switch drops the whites, blacks and greys that screenshots are full of, so you get the brand colours instead of six shades of background.
Related: Color Converter ยท CSS Shadow Generator ยท Background Remover