Add an image (or up to 30, 50 MB each) and the tool extracts its 3 to 16 most important colors (8 by default), sorted by how much of the image each covers. Copy any color as HEX, RGB or HSL, check text and background pairs against WCAG contrast, and export the palette as a PNG swatch sheet, CSS variables, a Tailwind config, JSON, a GIMP .gpl palette or an Adobe .ase swatch file. It all runs in your browser.
How to extract a color palette from an image
- Add an image.
- The palette appears automatically. Adjust the number of colors if you want more or fewer.
- Copy individual colors, or export the palette in the formats you need.
How the colors are chosen
The tool samples up to 60,000 pixels from the image, skips mostly transparent ones, and groups similar colors with k-means clustering, starting from a median cut split. The result is a set of representative colors ranked by how much of the image they cover, with the dominant color first.
Tips
Use a sharp, well-exposed image so the colors match what you see. Check the contrast of text and background pairs before using them in a design: the built-in checker shows whether a pair passes WCAG AA or AAA for normal and large text, and suggests the nearest color that does. Keep semantic names such as --color-fg and --color-bg in your CSS so the palette is easy to change later.
Why it helps your site
Readable color pairs keep text legible for more visitors, including people with low vision. The extraction happens in your browser, so you don't wait for an upload.
Developer guide
Paste the :root CSS variables into your global stylesheet. For Tailwind, paste the snippet under theme.extend.colors. In components, reference the colors through the CSS variables so you can re-theme later. Designers can import the .gpl file into GIMP or Inkscape and the .ase file into Adobe apps.
FAQ
Do images upload to a server?
No. Everything runs in your browser.
How are accessible suggestions chosen?
The checker first tries other colors from your palette. If none reach the target contrast, it adjusts the lightness of your color as little as possible until the pair passes WCAG AA or AAA.