Color Palette Extractor

100% Free · Client-Side

Extract dominant colors from any image. Export as CSS, SCSS, Tailwind config, or JSON.

Drop an image to extract colors

Supports JPEG, PNG, WebP, BMP, GIF

Max 50MB per file

What is the Color Palette Extractor?

The Color Palette Extractor analyzes any image and extracts its dominant colors using a color quantization algorithm (median-cut). It returns the top 3–12 colors with HEX and RGB values, percentage contribution, and WCAG contrast ratios. Export as CSS variables, Tailwind config, or JSON — all in your browser with no uploads.

Export Formats

CSS Variables

Exports as --color-1: #hex; custom properties, ready to paste into any stylesheet.

Tailwind Config

Generates a Tailwind CSS color theme object you can paste directly into your tailwind.config.js.

JSON

Exports a structured JSON array with hex, rgb, and percentage for use in JavaScript, design tokens, or APIs.

Common Use Cases

Extract a brand color palette from a company's logo or hero image
Generate cohesive color schemes from photography for website design
Create Tailwind or CSS design tokens from reference images
Verify WCAG color contrast compliance of extracted palette combinations
Identify the dominant colors in product images for e-commerce filter facets
Pull colors from a mood board to guide a design system's palette

Frequently Asked Questions

1. How are the dominant colors determined?

The tool uses a median-cut quantization algorithm to find the most representative colors in the image by dividing the color space into equal buckets and finding the average color within each.

2. What does the WCAG contrast ratio tell me?

The WCAG (Web Content Accessibility Guidelines) contrast ratio measures readability between two colors. A ratio of 4.5:1+ is AA compliant (required for normal text), and 7:1+ is AAA (enhanced accessibility).

3. Can I extract more than 12 colors?

The palette size can be set to 3, 4, 5, 6, 8, 10, or 12 colors. More colors gives a more detailed breakdown of the image, while fewer colors gives a cleaner, more actionable palette.