How does color extraction work?

The tool uses a median cut algorithm: it samples the image at a reduced resolution (50×50 pixels), groups all pixel colors into a 3D color space (R, G, B axes), then recursively splits the largest bucket along its widest axis until it has the target number of groups. The average color of each group becomes a palette color.

What are the sort options?

Dominance sorts by how many pixels each color represents (most common first). Hue sorts from red through orange, yellow, green, cyan, blue, and violet. Lightness sorts from darkest to lightest, which is useful for generating gradient stops.

What can I do with the extracted colors?

Click any swatch to copy its HEX value. Use the CSS export to paste ready-made CSS custom properties into your stylesheet. The Tailwind export generates a colors block for tailwind.config.js. The JSON export gives you a plain array of hex strings for any other use.

Why does the palette look different each time I change the color count?

The median cut algorithm partitions color space differently depending on how many buckets it creates. More colors reveal more nuance; fewer colors merge similar hues into a single representative.

Are my images uploaded anywhere?

No. The entire extraction runs in your browser using the Canvas API. No image data leaves your device.

Color Palette Extractor — Get Colors from Any Image

Upload any image and instantly see its dominant color palette — HEX, RGB, and HSL values for every color. Copy swatches individually or export the entire set as CSS variables, a Tailwind config, or a JSON array.

Useful for identifying brand colors from a logo, building a design system from a reference image, or matching a UI to a photograph.

Drop your image here

or click to browse

JPGPNGWebPAVIFGIFHEICSVGTIFFTGAHDRPDF

⌘Vpaste·Enterbrowse

Using extracted palettes in design

Brand identification: Drop a company logo into the extractor to instantly see its primary and secondary brand colors as exact HEX values. Useful when you need to match a brand's color system without access to their design files.

Photography-driven design: Extract from a hero image and use the palette as your page's color scheme. Colors from the same image share a natural harmony — they'll look cohesive together.

CSS custom properties: The CSS export generates a :root block with --color-1 through --color-N. Paste it into your stylesheet and reference the variables anywhere in your CSS.

Also try

Watermark — add text or logo overlays to any image →

Frequently Asked Questions

How does color extraction work?: The tool uses a median cut algorithm: it samples the image at a reduced resolution (50×50 pixels), groups all pixel colors into a 3D color space (R, G, B axes), then recursively splits the largest bucket along its widest axis until it has the target number of groups. The average color of each group becomes a palette color.
What are the sort options?: Dominance sorts by how many pixels each color represents (most common first). Hue sorts from red through orange, yellow, green, cyan, blue, and violet. Lightness sorts from darkest to lightest, which is useful for generating gradient stops.
What can I do with the extracted colors?: Click any swatch to copy its HEX value. Use the CSS export to paste ready-made CSS custom properties into your stylesheet. The Tailwind export generates a colors block for tailwind.config.js. The JSON export gives you a plain array of hex strings for any other use.
Why does the palette look different each time I change the color count?: The median cut algorithm partitions color space differently depending on how many buckets it creates. More colors reveal more nuance; fewer colors merge similar hues into a single representative.
Are my images uploaded anywhere?: No. The entire extraction runs in your browser using the Canvas API. No image data leaves your device.