What's the difference between 'dominant' and 'average'?

Average literally averages all pixels — usually produces a muddy gray. Dominant clusters pixels by similarity and returns the largest cluster's center — usually the actual visible main color.

How big can the image be?

Up to ~20 MP comfortably. Larger images are auto-downsampled to a working size before clustering — the dominant color is the same at any resolution, so this is lossless for the result.

Why not just use the first pixel?

Most images have a transparent corner or solid edge, which would give you a meaningless answer. Clustering finds the actual content-area color.

image → 1 color · dominant · local

Pull the dominant color out of any image

Q: Is my image uploaded?

No — sampling runs on a canvas in your browser. Your image never leaves the page. Safe for confidential mockups, customer photos, or unreleased product shots.

Upload a photo, get the single most-common color with coverage percentage. Useful for theme seeding and brand sniffing. Runs on-device.

Dominant Color Extractor

HEX

—

dominant

Coverage

—

pixel share

Method

16-step bucket

quantised

Status

idle

pick image

input · color

Image file

output · preview

Upload an image to extract its dominant color.

Quick Start

How to find the dominant color

The tool quantises pixels into 16-step RGB buckets, finds the largest bucket, and returns its averaged HEX along with how much of the image it covers.

01
Upload an image
Any JPEG, PNG, or WebP. Decoded entirely in the browser.
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
```
loaded · normalisedOKLCH · ready
02
Quantise pixels
Each pixel is binned into a 16-step bucket per channel.
Format conversion handles hex, rgb(), hsl(), oklch(), color(display-p3 …) with proper gamut mapping when crossing colour spaces.
mathhex · rgb · hslP3gamut-mappedlive
buckets · options16³ · live
```
r&0xf0 g&0xf0 b&0xf0
```
options applied · livelive
03
Pick the largest
The biggest bucket wins. We average its pixels for the final HEX.
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.
pickWCAG 2.2APCAAA · AAAcontrast
winner · convertedhex · ready
```
#3b82f6
```
converted · liveWCAG-aware
04
Copy or theme
One click to clipboard. Coverage shows how representative the color is.
Copy formats any swatch in the chosen syntax (#aabbcc, rgb(170 187 204), etc.); downloads emit CSS variable blocks or palette JSON.
useclipboardCSS varspalette JSONblob
ok · copiedready · done
```
32.1% coverage
```
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 the dominant color

Theming, accent colors, brand checks.

Theme seeding

Pick the accent that matches 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

Card thumbnails

Backfill list-card backgrounds based on the cover. 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

Brand audit

Sample colors used in someone's marketing photo. 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

Placeholder bg

LQIP — show a solid color while images load. 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

Fast prototype

Need an accent now? Drop an image, copy a color. 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

Album art tints

Recreate Apple/Spotify-style media tints. 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

Why is the dominant color sometimes muddy?

Photos with a wide gradient or many similar tones average into a muted shade. Try Color Scheme From Image to see all bands.

Can I downscale less?

We cap at 300px wide for instant results. The bucket math is resolution-independent.

Does coverage include the average?

Yes — coverage is the pixel share of the winning bucket before averaging.

What about transparent areas?

Alpha is ignored. Transparent pixels still contribute their RGB.

Is my image uploaded?

No — everything runs locally in your browser.

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!