Dominant Color Extractor

About Dominant Color Extractor

Dominant Color Extractor analyses an uploaded photo and returns the most prevalent colors as a small palette, ranked by how much area each color occupies. The algorithm starts by sampling the image at a reduced resolution to keep extraction snappy even on multi-megapixel photos, then runs median-cut quantization on the sampled pixels: the entire color cloud is recursively split along its longest axis, yielding evenly-populated color boxes whose averages become the palette entries. Each palette entry is reported with its HEX code, its RGB triplet, and the percentage of sampled pixels that mapped to it, so you can see at a glance which color truly dominates the image. The output is exported in four developer-friendly formats — newline-separated HEX, RGB, ready-to-paste CSS custom properties, and a JSON array — making it easy to wire the extracted palette into a website, a design mockup, a Tailwind theme, or a data-visualization color scheme. Everything runs locally in the browser using the Canvas API; no images are uploaded to a server.

What does "dominant color" actually mean for an image?

Dominant color is the color that occupies the largest visible area in a picture once all the slightly different shades are grouped together. A blue sky photo doesn't contain just one shade of blue — it has hundreds of subtly different blues spread across the sky. Color quantization solves this by collapsing visually similar shades into a single representative color, and the resulting bucket with the most pixels is the dominant color. This differs from the average color (a simple per-channel mean of every pixel, which often muddies into a beige-grey for any real photo) and from the most-saturated color (which is great for accents but rarely represents the picture as a whole). This tool reports the dominant color first in its swatch list and sorts the rest by descending coverage.

Why use median-cut instead of k-means clustering?

Median cut is a deterministic, single-pass algorithm originally introduced by Paul Heckbert in 1982 for converting 24-bit images to 8-bit indexed color. It builds the palette by recursively splitting the RGB color cube along its longest axis at the median, so every palette color gets roughly the same number of pixels behind it. K-means clustering can produce slightly higher-fidelity palettes for photos with strong bimodal color distributions, but it requires multiple iterations, randomized seed colors, and can occasionally land on a local minimum that misses an obvious cluster. Median cut runs in roughly linear time, gives reproducible output for the same input, and matches the algorithm used inside browsers for GIF encoding — meaning the colors it picks tend to survive well when the image is later saved as a quantized format. For nearly all UI-extraction and theming use cases, the two algorithms are visually indistinguishable.

Why is my dominant color washed-out compared to what I see in the image?

Two effects combine to produce paler-than-expected results. First, median-cut averages the pixels within each palette box; if your eye-catching red shirt is bordered by darker reds in the shadows, the box-average dilutes the vivid hue. Second, the human visual system disproportionately weights the most saturated patches, so a small bright-red logo on a beige background can feel like the "main" color visually even though it occupies less area than the beige. To get a more vivid palette, lower the requested color count (so the algorithm spends its budget on the most saturated regions), enable Ignore Near-White (which removes flat white backgrounds that dilute the average), or pre-crop the image to focus on the saturated subject. For brand-color extraction in particular, cropping to the logo before extracting is a robust trick.

How do I use the extracted palette in CSS or Tailwind?

The tool already produces a CSS variables block in the form `--color-1: #RRGGBB;`. Paste this into your :root selector and reference each color with `var(--color-1)`. For Tailwind, copy the HEX list and paste into your tailwind.config.js under theme.extend.colors with descriptive names: `primary: '#1a73e8'`, `accent: '#fbbc04'`, etc. The JSON output is also designed to be fed straight into a build script — each entry has hex, rgb, and count fields, so you can sort and filter programmatically. If you want a perfectly-spaced light-and-dark scale derived from one of the extracted colors, run the dominant HEX through a tool like our Color Shades Generator to produce a Material-style 50-900 palette.

How do I read the AA/AAA contrast badges next to each swatch?

Each extracted color shows a WCAG accessibility badge so you know instantly whether it is usable for text. The number (e.g. 4.7:1) is the best contrast ratio that color achieves against either pure black or pure white — whichever gives the stronger contrast. The badge translates that ratio into a WCAG 2.1 verdict: AAA (green) means a ratio of at least 7:1, safe for normal body text at the strictest level; AA (blue) means at least 4.5:1, the standard pass for normal text; AA Large (yellow) means at least 3:1, which only passes for large or bold text (18pt+/14pt bold) and for UI component borders; Fail (red) means below 3:1 — do not use it for text. The hex label printed on top of each swatch is auto-colored black or white using the WCAG-recommended 0.179 relative-luminance threshold: if a color's relative luminance is above 0.179 it is light enough that black text reads best on it, otherwise white text wins. The one-line summary under the palette counts how many of your colors clear the 4.5:1 AA bar, so you can see at a glance how many are safe as text or background in a real interface. This turns a raw swatch list into an accessibility-ready palette for buttons, labels, and backgrounds without hand-computing contrast.

How do I get the color palette or theme from a logo or screenshot?

Drag the logo image or a screenshot of the UI into the drop zone (or click to browse), and the tool extracts its palette the moment it loads — no upload, everything runs in your browser. For a tight brand palette, crop to just the logo first and set the color count to 3-5 so the algorithm spends its budget on the real brand colors instead of background noise; enable Ignore Near-White to drop flat white margins that otherwise dilute the result. For a screenshot of an existing website or app, leave the count higher (8-12) to capture primary, accent, surface, and text colors at once. Then copy the HEX list, the ready-to-paste CSS variables, or the JSON (which now includes each color's luminance, contrast ratios, and recommended text color) straight into your design tokens, Tailwind config, or build script. The inline AA/AAA badges tell you immediately which of the recovered colors are safe to reuse as text or backgrounds, so you can rebuild a theme that is both on-brand and accessible.

Why does the extractor skip pixels with alpha below 128?

Pixels with low alpha are mostly transparent — they would barely contribute to the visible image once rendered against any background. Including them would let large transparent regions of PNGs (especially logos and stickers) pollute the palette with the ghost of whatever background was visible when the alpha values were calculated. The 128 threshold (half-transparent or more opaque) is a conservative choice: it preserves anti-aliased edges of solid shapes (which carry the true subject's color) while excluding deeply transparent halos. If you need to extract colors from a tiny opaque region on a transparent background, the algorithm still works fine — there just need to be at least a few hundred opaque pixels to produce a meaningful palette.

Is the image uploaded to a server?

No. The selected image is read directly with a JavaScript FileReader, drawn onto an offscreen Canvas, and analysed entirely inside your browser tab. No network requests are made with image data — you can verify by opening DevTools and watching the Network tab. This means the tool is safe for confidential designs, customer photos, screenshots of unpublished UI work, and other privacy-sensitive imagery. It also means the tool keeps working when you're offline once the page is cached. The only resources downloaded over the network are the page assets themselves, not your image.