How does median-cut quantization work?

Median-cut is a classic color quantization algorithm that sorts RGB pixel values along their widest color channel range and repeatedly subdivides the box until the desired number of color clusters is reached.

Can I export the extracted palette directly to Tailwind CSS?

Yes! Select the "Tailwind" export tab to get a formatted theme.extend.colors snippet ready to paste into your tailwind.config.js.

Image Dominant Color Palette Extractor

Extract dominant color palettes, HEX/RGB/HSL swatches, CSS custom variables, and Tailwind config from any image.

Security Guarantee: 100% Client-Side In-Browser Execution. Computations run locally within browser RAM. Zero remote telemetry.

Technical Overview & Architecture

Extract dominant colors and color harmonies from photographs and UI designs. Powered by a fast client-side median-cut color quantization algorithm. Generates HEX, RGB, and HSL swatches with one-click export for CSS variables, Tailwind CSS configuration, and SCSS variables.

The image is sampled onto a downsampled Canvas context. The RGB pixel data is grouped into a 3D color space and repeatedly partitioned using median-cut quantization along the axis of greatest variance, producing representative color clusters in milliseconds.

Key Capabilities & Features

Median-Cut Color Quantization: Fast mathematical color clustering finds the true visually dominant colors without perceptual skew.
Configurable Swatch Counts: Extract 4, 6, 8, or 12 harmonious dominant color swatches with one click.
Multi-Format Export: Export instantly as CSS Custom Properties (:root { --color-1: ... }), Tailwind CSS theme config, SCSS, or JSON.
Proportional Color Ribbon: Visual spectrum bar illustrating the exact frequency distribution of each dominant color in the photo.

Step-by-Step Usage Guide

Upload Image: Drop any photo, artwork, or screenshot into the tool.
Select Palette Size: Choose whether to extract 4, 6, 8, or 12 dominant color swatches.
Copy Colors or CSS Variables: Click individual swatches to copy HEX values, or copy ready-to-use CSS / Tailwind variables.

Frequently Asked Questions (FAQ)

How does median-cut quantization work?: Median-cut is a classic color quantization algorithm that sorts RGB pixel values along their widest color channel range and repeatedly subdivides the box until the desired number of color clusters is reached.
Can I export the extracted palette directly to Tailwind CSS?: Yes! Select the "Tailwind" export tab to get a formatted theme.extend.colors snippet ready to paste into your tailwind.config.js.