Image Palette Extractor

What colors will I get from an image?

Choose an image to extract its most frequent color buckets, then narrow the result to a region if the background dominates. The default request is six colors. This is a representative palette, not a list of every original pixel value: nearby RGB values are grouped, and candidates too close to selected colors are skipped.

For a reproducible example, consider an opaque 100 × 100 image with 6,000 white pixels, 3,000 red pixels, and 1,000 blue pixels. Leave the region unset and background filtering off. All 10,000 pixels are sampled in this case. Quantization rounds channels down to multiples of eight, giving these results in Dominant order:

Three solid colors with no transparency or background filtering

Source RGB	Palette RGB	HEX	Sample share
255, 255, 255	248, 248, 248	#F8F8F8	60%
255, 0, 0	248, 0, 0	#F80000	30%
0, 0, 255	0, 0, 248	#0000F8	10%

Only three entries appear even when Colors requests six: there are no other buckets to select. If all four corners are white, enabling Ignore background removes the white samples. Red then represents 75% of the remaining 4,000 samples and blue represents 25%. This changes the analysis denominator; it does not recolor or erase the source image.

How does pixel quantization select the palette?

The extractor samples at regular intervals through the selected area's pixels. Its interval is the area in pixels divided by 10,000, rounded down, with a minimum interval of one. This targets roughly 10,000 samples for large areas; it is not a strict cap. An area of 15,000 pixels still uses an interval of one and examines all of them before transparency filtering.

Each RGB channel has 32 possible bucket values, from 0 to 248, producing 32,768 possible combinations. Buckets are ranked by count. A candidate is rejected when its RGB Euclidean distance from an accepted entry is less than 50. This numerical separation is not a perceptual guarantee: equally spaced RGB colors need not look equally different. No averaging of rejected buckets into accepted entries occurs.

The proportion bar is bucket count divided by eligible sampled pixels, after optional background filtering. Skipped buckets still contribute to that denominator, so visible bars need not total 100%. Removing a row also leaves the remaining proportions unchanged. Treat the bars as sampled bucket shares rather than an exact segmentation of the image into the displayed palette.

How do I isolate a subject or exclude its background?

Drag a box on the preview or enter X, Y, Width, and Height under Region (pixels). Coordinates refer to the source image, not the displayed preview size. Values are rounded and constrained to the image bounds. On a touchscreen, enable the button initially labeled Touch draw: off before dragging; numeric fields provide another way to select the area.

Ignore background (color at the corners) chooses the most common quantized corner color of the current area. Samples at RGB distances below 50 from that color are removed. It does not trace an object outline or detect a background semantically. A subject sharing the corner color can lose those samples, while a multicolored background can remain. Crop more tightly when the filter removes useful shades.

Reset region restores the whole image but leaves background filtering as selected. Changing the region, color count, or background option extracts a new palette and clears manual removals. Sort changes only the ordering. Finish those extraction choices before removing unwanted rows for export.

Which sort order and color values should I use?

Colors offers 4, 5, 6, 8, and 10. Start with six, then compare smaller or larger requests. Flat artwork may provide fewer distinct entries; photographs and gradients may distribute pixels across many small buckets. More requested colors does not guarantee that a small accent will appear. Select a region around that accent when it matters.

Dominant sorts by bucket frequency. Hue sorts by increasing HSL hue, while Brightness sorts by decreasing HSL lightness, not WCAG relative luminance. For grayscale references, lightness order is usually easier to inspect. Each row offers HEX, RGB, HSL, and OKLCH copying, plus the nearest CSS color name and Tailwind shade. Those names are matches, not proof that the original artwork used a named token.

What does each export contain?

Exports follow the visible order and omit removed colors. Choose a format in Export as and press Export, or use the separate image download buttons.

Palette outputs and their contents

Output	Contents and use
CSS Variables	A :root block with --color-1 onward; reference with var(--color-1).
JSON	An array of objects containing hex, rgb, and hsl; no proportions or OKLCH fields.
Tailwind Config (.js)	A CSS @theme block with --color-palette-1 onward, downloaded as palette.js.
HEX List	One HEX value per line; Copy all HEX instead uses commas.
ASE / GPL	RGB swatches in binary ASE or text GPL palette format.
PNG / SVG	Equal-width swatches with HEX labels, preserving the current order.

The Tailwind export is CSS despite its current menu label and extension; place its contents in your Tailwind v4 stylesheet. PNG and SVG allocate 160 pixels of width per color and 240 pixels of height, including the label area. Their swatches have equal widths regardless of sample share. Label text uses whichever of black or white has higher WCAG contrast.

How do I check contrast and continue the color workflow?

Each row checks the extracted color against white and black. Badges use WCAG normal-text thresholds: AA at 4.5:1 and AAA at 7:1, otherwise Fail. They do not test every pair in your palette or certify a complete interface. Check the actual foreground and background combination before using the palette for text.

Open a row in Color Converter to inspect other representations, or follow its Tailwind Color Finder link to explore nearby tokens. For an exact source pixel instead of a quantized bucket, use Image Color Picker. These fit alongside the other image tools when preparing a source before extraction.

What file, transparency, and memory limits matter?

The upload hint lists PNG, JPG, WebP, AVIF, and BMP; successful decoding depends on the browser. Only the first selected file is used. Pixels with alpha below 128 are excluded; eligible pixels contribute their RGB channels without alpha weighting. An entirely transparent image therefore produces no palette. Fully filtering out a uniform background can also leave no colors.

Files are read locally, drawn at natural dimensions, and analyzed through Canvas. Downloads are generated locally too. There is no extractor file-size cap, but full-size canvases and pixel buffers still consume memory. Reduce unusually large sources if decoding or extraction fails. For exact artwork colors, prefer a clean source and verify specific pixels separately rather than assuming the palette reverses compression or quantization.