Image Palette Extractor
Extract representative colors from a local photo and download a reusable CSS, JSON or SVG palette.
This tool processes its input contents in your browser instead of sending them to a processing service. Page, asset and fixed usage-measurement requests are described on the Privacy page.
Extract representative sampled image colors automatically and save CSS variables, JSON or an SVG swatch sheet.
How to use it
- 1Choose one local JPEG or still PNG.
- 2Review the automatic palette and approximate sample shares.
- 3Optionally change 2–16 colors or the transparency background.
- 4Download CSS, JSON or SVG.
Example
- Input
- Four opaque pixels: three red and one blue; request 2 colors.
- Output
- #ff0000 at 75% of samples and #0000ff at 25%.
Large images use bounded deterministic samples and grouped color means.
What happens to your data
The image is decoded and sampled locally. No photo, filename or extracted color values are sent by this tool to a processing service. Derived downloads contain a palette and settings, not the original image or its metadata. The tab keeps temporary working state until Clear, reload or close.
Last updated November 2026
Build a reusable color palette from a photo without uploading it. Choose one local JPEG or still PNG and the representative swatches appear automatically. The normal journey is choosing an image, then downloading CSS variables, a JSON color report or an SVG swatch sheet. Optional settings change the palette size or the background used for transparent pixels.
This image palette extractor is useful when starting a slide theme, matching a website mockup to an illustration or saving a rough photo palette for discussion. It differs from Color Palette, which generates harmonies from a chosen color, and Image Color Picker, which reads an individual pixel. Here the tool groups sampled colors across the picture; it does not inspect only the point you click.
How it works
The supported image is decoded to 8-bit sRGB canvas pixels. Transparent colors are composited on white by default, or black when selected. A fully transparent area therefore contributes the chosen background rather than arbitrary invisible RGB. Semi-transparent colors are blended before grouping. This makes the policy explicit, but it also means the palette describes the composited picture rather than separate foreground and alpha colors.
The tool takes at most 65,536 evenly spaced positions in row-major pixel order. It groups those samples into 5-bit-per-channel RGB bins, then uses weighted median-cut splits until the requested 2–16 clusters have been reached or no further split exists. Each swatch is the rounded mean of its cluster's original sampled RGB values. Equal rounded colors are merged; results are sorted by sample count with a stable color tie-break. Repeating the same decoded input and settings is deterministic. Periodic image patterns and small details can be missed by sampling, and RGB grouping does not guarantee perceptually optimal colors.
The percentage beside a swatch is its share of quantized samples. It is an approximation, not an exact count of every matching pixel in the full image and not a measure of brand importance. A solid image can produce only one swatch even when eight are requested. The CSS download defines --palette-1 and subsequent variables. JSON records the method, dimensions, sample count, transparency policy and colors without the filename. SVG draws flat swatches and readable color labels; it contains no original photo, script or external font.
Inputs are limited to 20 MiB, 16 million decoded pixels and 8,192 pixels per side. The guarded decoder accepts still JPEG and supported 8-bit PNG; animation, SVG and high-bit-depth PNG are refused. Source metadata, profiles and original compressed bytes are not preserved in these derived outputs. Clear, replacement, cancellation and changed settings invalidate old downloads; image decoding and bounded processing may complete their current step before cancellation is checked.
Worked example: An image with two flat colors
- Input
- Four opaque pixels: red, red, red and blue. Request 2 colors with a white background.
- Result
- #ff0000: 3 samples (75%); #0000ff: 1 sample (25%).
All four pixels are sampled. Large photographs use a bounded sample and clustered means, so their shares are approximate.
Common use cases
- Starting a website or presentation palette from artwork
- Sharing a small SVG swatch sheet with a designer
- Saving CSS variables for a prototype
- Comparing an image against a chosen white or black background
Frequently asked questions
Does extract colors from image mean finding every exact color?＋
No. A photo can contain millions of decoded colors. This tool returns representative cluster means from up to 65,536 deterministic samples. Use Image Color Picker for a particular pixel; do not treat approximate palette shares as full-image exact coverage.
Why are there fewer colors than I requested?＋
The image may have fewer distinct occupied color bins. Groups can also round to the same final RGB color and are merged. A solid red image should return one red swatch rather than invented extra colors.
What happens to transparency?＋
The decoded pixels are composited onto the selected white or black background before sampling. Fully transparent pixels become that background; partially transparent pixels contribute their blended visible color. The chosen rule is included in JSON.
Are these print-ready or calibrated brand colors?＋
They are decoded sRGB hex/RGB colors for an approximate digital palette. Canvas color conversion and browser behavior can affect values. The tool does not determine Pantone references, CMYK separations, print proofs or a legally authoritative brand standard.
Does the photo leave my device?＋
Palette processing uses only local file bytes and canvas pixels. The tool sends no photo, filename, swatch values or export contents to a processing server and keeps no persistent image history. Downloaded palettes still reveal selected colors from the picture.
Standards and limitations
Related tools
Image Color Picker
Pick original image pixels by coordinates, inspect HEX and RGBA, and export local swatches.
Color Palette Generator
Build five-color harmonies, lock swatches, check text contrast and export CSS or JSON.
Image Grayscale
Make a photo grayscale with a clear brightness method and a transparency-preserving PNG.
Image Threshold
Convert an image to two-tone black and white, with a threshold and explicit alpha controls.