Color Palette Extractor

Upload any image and extract its dominant colors using k-means clustering. Export as CSS, Tailwind, or JSON.

Runs in your browser
🎨
Drop an image or click to upload
Works with photos, logos, screenshots
Colors to extract:

How to Use the Color Palette Extractor

  1. Upload any image — photos, illustrations, brand assets, or screenshots all work well.
  2. Choose how many colors to extract (typically 5–8 gives a good balance).
  3. View the extracted palette with HEX and RGB values for each color swatch.
  4. Copy the palette as CSS custom properties, a Tailwind config object, or raw JSON for use in your project.

About the Color Palette Extractor

This tool uses a k-means clustering algorithm to identify the most visually dominant colors in any image. It's useful for designers who want to build a color system from a reference image or brand photograph, and for developers who need to quickly extract a coherent color palette for a Tailwind or CSS project. All processing happens locally in your browser — your image is never sent to a server. Export formats include raw HEX/RGB, CSS :root custom properties, and a Tailwind theme.colors block ready to paste into your config.

Frequently Asked Questions

How does color extraction work?
The tool uses a k-means clustering algorithm on the image's pixel data to group similar colors together. The center (centroid) of each cluster represents the dominant color for that group, producing a palette that reflects the most visually significant colors in the image.
How many colors can I extract?
You can typically extract between 2 and 16 colors. More colors gives a more detailed palette but may include very similar hues. For most use cases, 5–8 colors is the sweet spot.
Can I export colors for use with Tailwind CSS?
Yes. The Tailwind export option generates a JavaScript object formatted for the theme.colors section of your tailwind.config.js, with keys like 'primary', 'secondary', etc., ready to copy and paste.
What image formats are supported?
JPEG, PNG, WebP, and GIF are all supported. For best results, use a high-quality image — higher resolution images give the algorithm more pixel data to work with, resulting in more accurate palette extraction.