Color Palette Generator

Extract dominant colors from any image and get HEX, RGB, and HSL values.

Color Palette Generator pulls dominant colors out of any image and hands back HEX, RGB, and HSL for each — the card's pitch is "Extract dominant colors from any image and get HEX, RGB, and HSL values." A live "Number of Colors: {n}" control (range 2–12, default 5) sets how many swatches you want before you hit "Extract Palette".

Each swatch row shows the three value formats with per-value copy buttons and a percentage share (e.g. "42.13%"), while a horizontal bar preview scales each color's width by its share. Two exports ship: "Export CSS" writes :root { --color-N: hex; } variables to palette.css, and "Save Swatches" paints an 80×80-per-color strip to palette.png. Median-cut sampling downscales to 200px and skips alpha < 128 — all local, no network, no AI.

How it works

The image downscales to max dimension 200, pixels with alpha < 128 are dropped, and medianCut(pixels, ceil(log2(colorCount))) quantizes the rest. Each bucket averages to a representative color; rgbToHex and rgbToHsl derive the display values; percentage = bucket/total×100 (2 decimals). Colors are finally sorted by HSL lightness ascending for visual ordering.

handleExportCSS builds a :root block of CSS custom properties and saves palette.css; handleDownloadImage paints 80×80 swatches on canvas to palette.png. Zod: colorCount int 2–12 default 5; Redux colorPaletteSlice mirrors the default. No third-party libraries — pure Canvas ImageData + median-cut.

How to use

Drop one image (default dropzone label, accept image/*, single file).
Set "Number of Colors: {n}" (range 2–12, default 5; scale ends labeled 2 and 12).
Click "Extract Palette" (button reads "Extracting..." while sampling).
Review swatches with HEX / RGB / HSL rows, per-value copy icons, and percentage shares.
Glance at the horizontal export bar preview — each segment's width equals its percentage.
Click "Export CSS" (palette.css variables) or "Save Swatches" (palette.png strip).
Click "Start Over" — or the preview "Remove" button — to clear.

Tips

Median-cut depth is ceil(log2(count)), so you may get up to 2^depth buckets before slicing to colorCount (top buckets win by pixel count).
Fully transparent pixels (alpha < 128) are excluded from sampling — transparent PNG backgrounds will not skew results.
Colors are re-sorted by HSL lightness after percentage ranking, so swatches read light-to-dark visually.
Sampling caps at 200px max dimension — extraction stays fast even on huge photos.