Use the palette extractor to generate a PALETTE file from supported inputs quickly in your browser.
A palette extractor turns any photo, screenshot, or piece of artwork into a structured set of colors you can reuse in design, code, or branding. The extracted swatches represent the most visually dominant colors in the image, ranked by how much of the canvas they cover. Common use cases:
theme.extend.colors as 50-950 shade scales, which Tailwind's 22 default color families also follow.Most palette extractors run one of three color quantization algorithms. They all reduce millions of pixel colors down to N representative swatches, but they trade speed against quality differently.
| Algorithm | How it works | Strengths | Weaknesses |
|---|---|---|---|
| Median cut | Recursively splits the RGB color box at the median of its longest axis until N boxes remain; each box's centroid becomes a swatch. Popularized for the web by Lokesh Dhakar's Color Thief library. | Fast, deterministic, great for "obvious" dominant colors | Can miss small but visually important accents |
| Octree | Builds an octree of pixel colors and merges leaves bottom-up until N nodes remain. | Memory-efficient, good for very large images | Output can be biased by tree-merge order |
| K-means | Picks N initial centroids and iteratively reassigns pixels to the nearest centroid until clusters stabilize. | Highest perceptual quality; can iterate for better fit | Slower; non-deterministic without a fixed seed |
Median cut and octree are pre-clustering methods — the palette is computed once. K-means is a post-clustering method — it iterates to improve the fit, which is why Adobe Color, Colormind, and research-grade tools tend to favor k-means or hybrid k-means variants.
| Format | What you get | Best when |
|---|---|---|
HEX (#A3B2C1) |
6-char hex per swatch | Pasting into design tools, copying to clipboard |
RGB (rgb(163, 178, 193)) |
3-channel decimal | CSS, JavaScript, photo editors |
HSL (hsl(210, 18%, 70%)) |
Hue / saturation / lightness | Tweaking shades programmatically (lighten/darken) |
| Tailwind config object | { 50: '#...', ..., 950: '#...' } shade scale |
Drop straight into tailwind.config.js |
| CSS custom properties | --brand-1: #...; --brand-2: #...; |
Theming a site with CSS variables |
| Adobe ASE | Binary .ase swatch file with named colors |
Importing into Photoshop, Illustrator, or InDesign |
The extractor reads every pixel and groups similar colors into clusters using a quantization algorithm (most commonly median cut, but k-means and octree are also used). Each cluster's centroid — the average color of the pixels assigned to it — becomes one swatch in the palette. The clusters are then ranked by pixel count, so the first swatch represents the largest area of the image, the second swatch the next-largest, and so on. "Dominant" means high pixel coverage, not necessarily the brightest or most saturated color.
Three things vary between tools: the algorithm (median cut vs k-means vs octree), the sample size (some tools subsample every Nth pixel for speed; others read all pixels), and pre-processing (some tools convert to Lab color space, dim outliers, or apply saturation weighting before clustering). K-means is also non-deterministic without a fixed seed, so even the same algorithm with the same input can produce slightly different palettes on re-runs. Expect families of similar colors, not byte-identical hex codes.
High-resolution photos and finished artwork with rich color variety extract well — landscapes, portraits, brand graphics, product shots. Sketches, line art, and screenshots dominated by a single background color produce thin palettes because most pixels collapse into one or two clusters. For brand-color extraction from a logo, use the highest-resolution source you have (vector exported as 2000×2000+ PNG is ideal); a tiny favicon won't have enough pixels to separate accent colors cleanly.
Take a screenshot of the page (full-page or hero section), upload it, and extract. The result will be biased toward whatever's on screen — a screenshot of a hero banner gives the hero's colors; a screenshot of the full home page gives a more diverse palette including UI chrome. For a single element (a button, a logo), crop the screenshot first so the extractor isn't diluted by white space and body text.
Yes. Copy the swatches as HEX and paste them into a tailwind.config.js theme.extend.colors object — Tailwind's default palette uses 11-step shade scales (50, 100, 200… 950) across 22 color families, and tools like Tints.dev or TWColors can expand a single brand hex into the full 50-950 scale. For CSS variables, format as --brand-primary: #A3B2C1; declarations. ASE files are a binary Adobe format used to exchange swatch sets between Photoshop, Illustrator, and InDesign; note that Adobe never officially published the ASE spec, so most third-party exporters rely on community-reverse-engineered structure.
Five is the de facto standard for brand palettes (primary, secondary, accent, neutral light, neutral dark) and is what Coolors and Adobe Color default to. Eight to ten swatches work well for UI themes that need success/warning/error states plus brand colors. Fifteen or more is mainly useful for art reference, mood-board analysis, or when you want to see the full color story of a photograph including mid-tones.
Yes, especially for UI work. Roughly 8% of men and 0.5% of women have some form of color vision deficiency (most commonly red-green). Two swatches that look distinct in your editor may be indistinguishable to a user with deuteranopia or protanopia. Verify contrast and color separation with a color-blindness simulator and check that any text-on-color combinations meet the WCAG 2.2 AA contrast ratio of 4.5:1 for body text and 3:1 for large text.
No. The image is decoded by your browser's canvas API and the quantization runs locally in JavaScript. Nothing about the image — pixels, EXIF, filename — leaves your device, which matters for unreleased brand assets, NDA-protected mockups, and personal photos.