Color Palette Generator with WCAG Contrast

Q: How do I build a palette from an image?

Choose Image and pick any PNG, JPEG, WebP or GIF. Colorstrix reduces it to its dominant colors with median-cut quantisation. The picture is read locally and never leaves your device.

A color palette generator that shows its work

Colorstrix builds palettes from color theory rather than random noise. Choose a harmony, and every color is placed at a deliberate angle on the color wheel around a shared base hue, then spread across a lightness ramp so the set reads as a family instead of a pile of swatches.

Press Regenerate until something catches your eye, lock the colors that work, and regenerate again — the locked ones stay put while the rest reharmonise around them. It all runs in your browser: no account, no upload, no server. The palette lives in the page URL, so copying the link is all it takes to send it to a client or a teammate.

The color harmonies, and when to reach for each

Monochromatic — one hue across many lightnesses. Calm and effortless to keep readable; the safe pick for dashboards and documentation.
Analogous — neighbours on the wheel. Naturally harmonious, the way a sunset or a forest is; good for backgrounds and illustration.
Complementary — two opposite hues. Maximum tension, so use one as the dominant color and the other purely as an accent.
Split complementary — an opposite pair softened by one step. Most of the contrast, far less of the vibration.
Triadic — three hues evenly spaced. Vivid and balanced; the classic choice for games, posters, and children's brands.
Tetradic and square — four hues forming a rectangle or a square. The richest sets, and the hardest to balance; let one hue lead.

Contrast you can actually ship

Every swatch is scored for WCAG 2 contrast against black and white text, and shows the winning combination with its exact ratio. AA needs 4.5:1 for body text, AAA needs 7:1.

A palette that looks great and fails both is a palette you will be asked to redo after an accessibility audit, so it is worth seeing the number while you are still choosing rather than discovering it in review.

HEX, RGB, HSL and OKLCH

Each color is shown in four notations, and any of them copies with one click. Palettes are generated in OKLCH, a perceptually uniform color space, which is why the lightness ramp looks even rather than bunching up in the yellows the way an HSL ramp does.

When a color falls outside what a screen can display, Colorstrix reduces its chroma while holding lightness and hue — so a color gets a little less saturated, never a different color.

Frequently asked questions

Is Colorstrix free?

Yes. It is free, needs no account, and runs entirely in your browser.

How do I build a palette from an image?

Choose Image and pick any PNG, JPEG, WebP or GIF. Colorstrix reduces it to its dominant colors with median-cut quantisation. The picture is read locally and never leaves your device.

Can I keep a color I like and change the rest?

Lock it with the padlock on the swatch, then regenerate. Locked colors survive regeneration, and the new palette is harmonised around them. They also survive when you reduce the number of colors — unlocked swatches are dropped first.

How do I save or share a palette?

The palette is encoded in the page URL, so bookmarking the page saves it. Share copies that link, and CSS copies the palette as CSS custom properties ready to paste into a stylesheet.

What do the AA and AAA badges mean?

They report whether black or white text on that color meets the WCAG 2 contrast thresholds — 4.5:1 for AA, 7:1 for AAA — at normal body-text size. The exact ratio is shown beside them.

How many colors can a palette have?

Between three and eight. Five is the usual sweet spot for a brand or a UI theme.