Image Color Palette Extractor
Drop any photo and pull out its dominant colours as hex codes in seconds. Export as CSS variables, Tailwind config, or SCSS - and check whether they meet contrast requirements for web use.
Drop an image to extract its palette
JPG, PNG, WebP, GIF — processed entirely in your browser
or paste from clipboard (Ctrl+V)Extracted palette
Palette stats
Color harmonies — click any swatch to copy
Color Extraction and Web Design Palettes
How K-Means Clustering Works
K-means starts with random color seeds and assigns every pixel to its nearest seed. Then it recalculates each seed as the average of all pixels assigned to it. After several iterations, the algorithm converges on the most representative colors in your image. If you ask for 5 colors, you get the top 5 dominant hues; asking for 15 gives you finer detail.
WCAG Contrast and Accessibility
Once your palette is extracted, this tool checks whether each color passes WCAG contrast requirements when paired with white or black text. A score of AAA means excellent contrast (7:1+), AA is good (4.5:1+), and failing means the color alone cannot serve as a readable background. Use this feedback to guide which colors work for text vs. decorative elements.
FAQ
How does k-means clustering extract colors from an image?
K-means clustering groups all the pixels in an image by color similarity. Starting with random color seeds, it iteratively assigns each pixel to the nearest seed and recalculates the average. After several iterations the seeds converge onto the most representative colors in the image - the dominant palette.
Can I use extracted colors in my CSS or Tailwind project?
Yes. The tool generates ready-to-paste CSS custom properties (--color-1: #hex), SCSS variables ($color-1: #hex), and a Tailwind CSS config object with the palette as custom colors. Copy whichever format suits your project directly from the output panel.
Are my images uploaded to a server for color extraction?
No. The image is read by the browser's Canvas API and all color analysis runs in JavaScript on your own device. Your images never leave your browser. This is safe to use with confidential design assets, client photos, or proprietary brand imagery.