Color Palette Extractor

Extract dominant colors from any image using median-cut quantization. Hex + RGB output, CSS array export, browser-side.

Color Palette Extractor pulls the dominant colors out of an image so you can recreate a brand palette, find the colors of a stock photo before designing around it, or generate a Tailwind palette from a moodboard. Designers do this manually with the Photoshop eyedropper — this tool does it in 2 seconds for any image.

Pickrack's Color Palette Extractor uses the median-cut algorithm — the same quantization technique that GIF encoding and most palette extractors use. It samples the image at moderate resolution (240px max edge), recursively splits the color space along the channel with the largest range, and averages each bucket. Output: 3 to 12 dominant colors with hex codes, RGB values, and a CSS-array copy button.

Free, no signup, no upload. The image stays in your browser memory. All processing is JavaScript + Canvas, no server roundtrip.

Key features

• Median-cut quantization — Industry-standard color reduction algorithm. Splits color space at the largest-range channel recursively until you have K buckets, then averages.
• 3-12 swatches, adjustable — Drag the slider to choose how many colors to extract. 5-6 is typical for branding; 10-12 for full moodboard analysis.
• Hex + RGB output — Each swatch shows hex (#FF5733) for CSS/design tools and rgb(255, 87, 51) for canvas/JavaScript code.
• CSS array export — One-click copy of all colors as a JSON-style array: ["#FF5733", "#33C7FF", …]. Paste into Tailwind config or CSS variables.
• Browser-side, no upload — Image and computation stay in your browser. Privacy guaranteed for unreleased product designs or client assets.

How to use

1. Step 1: Upload an image — Drop or click. PNG, JPG, WebP, AVIF up to 30 MB. The image is resized internally to 240px max edge for fast sampling (output palette is identical regardless of source size).
2. Step 2: Adjust color count — Default 6 swatches. Slider goes 3-12. More colors = finer palette but diminishing returns past 8-10.
3. Step 3: Copy individual hex codes — Click the copy icon next to any swatch. Hex code goes to clipboard.
4. Step 4: Or export the full palette — Click 'Copy' next to the CSS array at the bottom. Paste into your Tailwind config or design tool.

When to use

• Brand palette extraction — drop a competitor's logo, get their primary colors
• Tailwind color scale generation — drop a brand image, get 5-6 starting colors for colors: { brand: { ... } }
• Stock photo prep — extract the dominant 5 colors of a hero image, design surrounding UI to match
• Moodboard analysis — extract 12 colors from a Pinterest-style moodboard, find the actual color story
• Print preparation — get the dominant colors of an image to feed to a Pantone matching tool for spot-color prints
• Data viz inspiration — pull a 6-color palette from a beautiful photo, use as a data-viz categorical color scheme

Frequently asked questions

Related tools