Color palette extractor: help & limits

About this tool

Turn an image into a small set of colors for a design starting point. Choose how many colors to show, copy individual HEX codes or export the set as CSS variables. The palette emphasizes frequent, distinct colors in a sampled image; it is a suggestion based on the pixels, not a claim about the image’s official brand colors.

How to use

Choose a supported still image.
Review the generated palette and select up to four, six, eight or twelve colors.
Copy individual HEX values or download reqly-palette.css for use in a stylesheet.

Supported files

JPG, PNG, WebP, AVIF, HEIC, BMP, still GIF · Up to 64 MiB · 64 megapixels. One image at a time. Maximum 16,384 pixels per edge.

How it works

A local worker reduces the image to at most 256 pixels on its longest edge. Pixels below 50% opacity are ignored. RGB channels are grouped into 16-level bins and averaged; bins are ordered by frequency. Colors within an RGB distance of 36 of an earlier selection are skipped. Flat or transparent images can yield fewer colors than requested.

Examples

A mood board from a landscape

Choose six colors from a landscape photograph, then copy a muted blue and an earth tone as starting points. Test contrast separately before using them for text.

CSS variables from an illustration

Extract four colors from a flat illustration and download the CSS. Variables are named --color-1 through --color-4 when four distinct colors are found.

Limitations

Sampling and averaging can miss small details or create colors that do not match one exact source pixel. Use the color picker for precise pixel values.
This does not evaluate accessibility contrast, identify objects or recover an official brand palette. Semi-transparent colors are not composited onto a background.
Fewer than the requested number may be returned. Fully transparent images have no eligible palette. Browser color conversion can affect output; animations are unsupported; AVIF decoding depends on the browser.

Privacy

Sampling, color grouping and CSS generation all happen on your device. No image, filename or extracted palette is sent to a server. CSS downloads contain only the chosen color variables.

Local processing explained

Common questions

Why are there only two colors when I requested six?

Your image may have few distinct color groups after sampling and transparency filtering. The tool does not invent extra colors to fill the list.

Can I use the palette for accessible text?

Only after checking your chosen foreground/background pairs in a contrast checker. Frequency in an image does not imply readable contrast.

Why is a small accent missing?

The method favors common colors in a reduced sample. Crop to the accent first, or use the exact pixel color picker.