Palette Extractor
Extract dominant colors from an image as hex, CSS variables or Tailwind tokens.
Building a theme from a logo or a photo usually means picking colors by eye. The Palette Extractor finds the dominant colors in an image using median-cut quantization and gives you ready-to-paste CSS variables and Tailwind color entries. The image is processed on your machine and never uploaded.
Dominant colors from any image
Drop a PNG, JPEG, WebP, GIF or BMP file and get a palette of hex colors. The image is downscaled before analysis to keep it fast.
Adjustable color count
Use the slider to extract between 2 and 12 colors. The palette updates as you move it.
Click to copy
Click a swatch to copy its hex value. Hover to see the RGB value.
CSS variables export
Copy the palette as a :root block with custom properties named --color-1, --color-2 and so on.
Tailwind export
Copy the palette as Tailwind color entries named palette-1, palette-2 and so on, ready to paste into your config.
How does the tool find the dominant colors?
It uses color-thief, a median-cut quantizer, on a downscaled copy of the image. The result is a list of representative colors, not an exact count of every pixel.
Can I get the palette as Tailwind colors?
Yes. The tool shows a Tailwind snippet with entries named palette-1, palette-2 and so on. Copy it and rename the keys to suit your design system.
Pick a color and convert it between HEX, RGB, HSL and OKLCH.
Open →Convert PNG, JPEG, WebP and AVIF images in batch, offline.
Open →Optimize SVG markup with SVGO and rasterize it to PNG at any size.
Open →No card, no account. Every tool included, bought once.