Zellio.io

Palette Extractor & Contrast Matrix

Pull the dominant colours from an image and check every pairing for contrast.

Processed locally — nothing is uploaded

About Palette Extractor & Contrast Matrix

The matrix is the part worth reading twice. Each cell is drawn as that pairing — one colour as text on another as background — with the WCAG ratio, its AA/AAA grade, and the APCA Lc the next generation of the guidelines will use. A palette that looks harmonious and a palette whose text you can read are different things, and the matrix shows which you have.

Drop in a photograph, a logo or a screenshot and the tool samples it down to a thumbnail, groups the pixels by median cut, and hands back the handful of colours that account for most of the picture, ordered by how much of it each one covers. Median cut splits the colour space along whichever channel varies most, so it separates the distinct hues in an image rather than averaging everything into one beige. If you already have the colours, paste the hex values instead and skip the image entirely.

Under the swatches is a grid with every colour as text against every colour as background. Each cell is painted in that pairing, so the number in it is not an abstraction — you are looking at the exact combination it describes. The ratio is the WCAG 2 figure that accessibility audits cite, graded AAA at 7:1, AA at 4.5:1 and AA Large at 3:1. Below it sits the APCA lightness contrast, which the draft of WCAG 3 uses because it models how text is actually perceived: negative for light text on a dark ground, and honest about pairings the older ratio over- or under-rates.

Exports cover where palettes actually go. CSS custom properties for a stylesheet, a Tailwind colours block for a config file, plain JSON for a design-token pipeline, an SVG sheet of labelled swatches for a document, and an Adobe Swatch Exchange file that opens in Illustrator, Photoshop and the importers in Figma and Affinity. The .ase is written byte by byte in the page, which is why it downloads instantly.

Sampling happens on a copy of the image no larger than 160 pixels on its longest side. That is deliberate: a palette is a statement about the picture as a whole, and a thumbnail preserves that while turning a forty-megapixel export into something that can be quantised in a few milliseconds. Fine texture and single-pixel highlights disappear at that size, which for palette purposes is what you want.

Learn how this works

How to Edit Images in the Browser Without Uploading ThemCompress, watermark and strip metadata from photos entirely on your device — why client-side image editing is faster and more private.8 min read

Frequently asked questions

Why is a colour I can clearly see missing from the swatches?

Because it covers little of the image. The count slider decides how many groups the pixels are divided into, and a small accent — a red button on a grey screenshot — may not earn its own group until the count is higher. Raise it to eight or ten and the accent usually appears, with its share shown as a small percentage.

Which contrast number should I trust, the ratio or the Lc?

Both, for different questions. The WCAG 2 ratio is what a compliance review and most legal standards ask for today, so it decides whether a pairing passes. APCA Lc is the better predictor of whether text is comfortable to read, especially for light text on dark backgrounds, which the ratio tends to grade too harshly, and dark text on mid-tones, which it grades too kindly.

What do the AA and AAA grades mean for large text?

The grades shown are for normal-size text. Large text — roughly 24 pixels regular or 19 pixels bold — passes AA at 3:1, which the table labels AA Large. A pairing marked Fail is below even that and should be reserved for decoration, not words.

Can I use the .ase file in Figma?

Figma has no native .ase import, but the widely used colour-import plugins read it, and Illustrator, Photoshop, InDesign and Affinity open it directly. For Figma's own variables the JSON export is the shorter route.

Is the image uploaded anywhere?

No. Everything runs locally in your browser using standard web APIs — your text, files and inputs are never uploaded to a server, so the tool works even offline once the page has loaded.

Is it free?

Completely. There is no sign-up, no account, no watermark and no usage limit. The tool is supported by unobtrusive ads, not by selling or processing your data.

Pro Tips

  • →For a brand palette, sample the logo rather than a photo of the product — photographs carry lighting and shadow colours that a brand guide does not want.
  • →Read the matrix by row: pick the colour you intend to use for text, then look along its row for backgrounds that pass. Most palettes have one or two usable text colours, not five.
  • →Aim for at least one pairing at AAA. Body copy in a long article needs it more than a button label does.
  • →If two swatches are near-identical, lower the count — the algorithm has split one colour in two because nothing else in the image was distinct enough to claim the slot.
  • →The share percentages tell you which colour is the ground and which are accents; use them in that proportion and the result resembles the source.

Common Use Cases

  • •Building a colour scheme for a site or slide deck from a hero photograph, with the text colours checked before anything is designed.
  • •Extracting a client's brand colours from a logo when the brand guide has gone missing.
  • •Checking an existing palette for accessibility by pasting its hex values and reading the matrix.
  • •Producing a swatch file for a print designer from colours that only exist in a screenshot.
  • •Auditing a dashboard's status colours — green, amber, red — for whether their labels can actually be read.

How It Compares

Adobe Color and Coolors extract palettes from images and do it well, with mood and harmony features this tool does not attempt; both send the image to a server to do it. Contrast checkers such as the WebAIM tool take one pairing at a time, which is fine for a spot check and slow for a palette of six, where there are thirty pairings to consider. This tool trades breadth of palette-generation features for keeping the image on the device and showing every pairing at once, with both the current and the coming contrast standard side by side.

Related tools

Watermark AdderOverlay custom text or a logo onto any image, then download it.Meme GeneratorAdd bold top and bottom text to classic or custom images.Image CompressorShrink PNG & JPEG files to a target size — one at a time or in batches.EXIF Viewer & RemoverInspect photo metadata and strip EXIF/GPS data before sharing.