5 is the canonical 'usable palette' size — primary, secondary, accent, plus a darker and lighter neutral. The tool offers 3, 5, or 8 colors; 5 is the default sweet spot.

How is this different from dominant-color-extractor?

Dominant returns just the single biggest cluster. Scheme returns N clusters spread across the image's color space — so a sunset photo gives you orange, pink, deep blue, plus the foreground silhouette tones.

Will the palette work for UI design?

Yes — the output includes WCAG contrast values for each color so you can see which pairs are accessible for text/background pairings.

image → palette · k-means · local · live

Extract a 5-color palette from any image

Q: Is my image uploaded?

No — runs entirely in your browser via canvas.

Upload a photo and pull a harmonious palette via on-device quantisation. Click any swatch to copy its HEX. Nothing leaves your browser.

Color Scheme From Image

Colors

target 5

Source

—

no image

Method

k-means

quantised

Status

idle

pick image

input · color

Image file

output · preview

Upload an image to extract its palette.

Quick Start

How to extract a palette from a photo

Upload an image and the tool quantises pixels into perceptual buckets, then returns the most-common N colors as your palette.

01
Upload an image
Any JPEG, PNG or WebP. The image is downscaled to ~400px wide for speed.
Colors round-trip through a normalised OKLCH representation, so manipulations (lighten, mix, contrast) preserve perceptual uniformity per CSS Color 4.
uploadOKLCHCSS Color 4perceptuallive
input · colorimage · sRGB
```
photo.jpg → canvas
```
loaded · normalisedOKLCH · ready
02
Pick palette size
2–20 colors. 5 is the Coolors-style default.
Format conversion handles hex, rgb(), hsl(), oklch(), color(display-p3 …) with proper gamut mapping when crossing colour spaces.
counthex · rgb · hslP3gamut-mappedlive
k · options5 · live
```
5 buckets
```
options applied · livelive
03
Quantise
Pixels are grouped into 32-step RGB buckets and the largest are averaged.
Contrast and accessibility checks evaluate against WCAG 2.2 AA (4.5:1) and AAA (7:1) thresholds; APCA is offered when contrast is the goal.
mathWCAG 2.2APCAAA · AAAcontrast
method · convertedk-means · ready
```
#3b82f6 #ef4444 ...
```
converted · liveWCAG-aware
04
Copy swatches
Click any swatch to copy its HEX. Use Copy palette for the whole set.
Copy formats any swatch in the chosen syntax (#aabbcc, rgb(170 187 204), etc.); downloads emit CSS variable blocks or palette JSON.
exportclipboardCSS varspalette JSONblob
ok · copiedready · done
```
Copied #3b82f6
```
shipped · ready to shipsuccess

Pro tips

Colour work that survives accessibility audits

Use OKLCH for manipulation

OKLCH is perceptually uniform — lightness changes look uniform. hsl() isn’t, and produces muddy mid-tones.

Test against WCAG 2.2

4.5:1 for normal text (AA), 7:1 for AAA. Use Contrast Checker before shipping.

Mind gamut clipping

P3 colours that exceed sRGB get clipped on standard displays. Choose relative colorimetric in CSS Color 4.

Colour blindness affects 8%

Use the Color Blindness simulator to check critical UI before launch.

Don’t hardcode hex

Use CSS variables. Light/dark themes become trivial when colours are tokenised.

Dark mode isn’t inverted

Don’t simply invert lightness — desaturate slightly and re-pick accents. Pure-inverted UIs look harsh.

Use Cases

When to extract palettes from images

Brand boards, slide decks, theming.

Brand palettes

Pull a starter palette from a hero photo. Conversions go through OKLCH so perceptual lightness stays uniform across hues — a 50% L blue looks as bright as a 50% L yellow. HSL fakes this and produces muddy mid-tones, OKLCH solves it per CSS Color 4.

WCAG 2.2 AA

Slide decks

Match deck colors to a screenshot. WCAG 2.2 contrast is sampled live for AA (4.5:1) and AAA (7:1) — flip foreground/background to test both directions. APCA is offered when contrast itself is the goal (e.g., dataviz).

P3-aware

Mood boards

Convert reference imagery into hex codes. Output covers hex, rgb(), hsl(), oklch(), and color(display-p3 …) for CSS Color 4. Drop straight into Tailwind config, CSS custom properties, or Figma without re-typing values.

perceptually-uniform

Theme tokens

Seed dark/light themes from a photo. Pair with the Contrast Checker before shipping any new theme. Catches accessibility regressions before they become bugs filed against you by users with low vision.

gamut-safe

Quick mockups

Drop in a placeholder palette in seconds. Tokens drop straight into Figma variables, Tailwind config, or CSS custom properties. Theme switching becomes a single variable swap rather than a search-replace across stylesheets.

a11y-ready

Brand audits

Sample colors actually used on a marketing site. Gamut-aware: tools warn before you ship a P3 colour that clips on sRGB displays. Choose the appropriate fallback strategy (relative colorimetric vs perceptual) per CSS Color 4 spec.

design-token

FAQ

Frequently asked questions

How are colors picked?

Pixels are bucketed into 32-step RGB cubes; the largest buckets are averaged and returned in descending frequency.

Why not exact k-means?

Bucketing is far cheaper and gives near-identical results for design work. Pure k-means is in our research backlog.

What file types work?

Anything the browser's <img> tag can decode — JPEG, PNG, WebP, AVIF, GIF, SVG.

Is my image uploaded?

No. The image is decoded via a local FileReader and sampled in a hidden canvas.

Can I get more than 5?

Yes — set the Colors field to anything between 2 and 20.

Suggest a tool

Something missing?

Tell us what you need. We ship the top requests every two weeks.

47 in queue·8 shipped this month

Request queued. Thanks!