Image Color Palette Extractor (HEX, RGB, Tailwind CSS)
Upload any image and the tool finds its dominant colors with k-means clustering, showing each swatch with its share of the picture. Choose 2 to 10 colors and copy them as HEX values, RGB, CSS custom properties, a Tailwind CSS v4 @theme block or a Tailwind v3 config snippet. Click any swatch to copy its code. The image is analysed locally and never uploaded.
Reviewed by Vincenzo Manto, Founder & Lead Developer · Last updated September 30, 2026
How it works
- 1
Drop an image or choose a file.
- 2
Adjust the slider to pick how many colors to extract.
- 3
Click a swatch to copy one color, or choose a format and copy the whole palette.
Building a palette from imagery
Photographs, logos and artwork are a natural source for brand and interface colors. Extracting a palette from a hero image helps you pick accents that harmonise with it, keep social graphics consistent with product photos, or match a website theme to a campaign visual.
Turning extracted colors into a design system
Extracted colors are a starting point rather than a finished system. Check text contrast on each color, name the colors by role such as primary, accent and surface, and generate lighter and darker shades for hover states and backgrounds. Then paste the CSS variables or Tailwind theme into your project.
k-means, not a simple histogram
A naive 'most common pixel' approach gets fooled by noise and anti-aliasing, returning near-duplicate shades instead of genuinely distinct colors. Clustering with k-means groups similar pixels first, so each swatch represents a real, visually separate color region of the image rather than a statistical fluke.
Frequently asked questions
How are the dominant colors chosen?
The image is downscaled and its pixels are grouped into clusters by k-means. Each cluster centre becomes a palette color, sorted by how much of the image it covers. Transparent pixels are ignored.
Why do the colors not exactly match pixels in my photo?
Each palette color is the average of a group of similar pixels, so it represents an area of the image rather than a single pixel. That is what makes the palette useful for design.
Which Tailwind format should I use?
Tailwind CSS v4 defines theme colors in CSS with an @theme block, so use that one for new projects. The v3 option outputs a tailwind.config.js snippet for older setups.
Is my image uploaded?
No. The image is decoded and analysed in your browser only.
Related tools
Screenshot Beautifier
Turn a screenshot into a studio-quality mockup with window frames, 3D tilt, shadows, and redactions.
Screenshot Showcase Generator
Transform screenshots into professional multi-device showcase graphics.
Image to Video Converter
Turn a set of images into a slideshow video, exported as MP4 or WebM.