Image Palette Extractor
Pull the dominant colours out of a picture, with how much of it each covers. Free, and runs entirely in your browser — nothing is uploaded.
About Image Palette Extractor
Finds the dominant colours in a picture — a photo, a logo, a screenshot — and lists them with how much of the image each covers, ready as CSS variables, a Tailwind theme, a hex list or JSON.
The colours are grouped in Oklab rather than RGB, so the clusters match what a person would call 'the same colour': a sky in several shades of blue comes back as one blue, not three, and a small bright accent is not swallowed by a large dull area of similar numbers.
The picture is read in this browser and never uploaded. It is scaled down to a couple of hundred pixels a side first, which is plenty for colour and keeps extraction instant even for large photographs.
Where it helps
- Groups colours perceptually, in Oklab, so results match what the eye sees.
- Reports each colour's share of the picture, not just a list.
- Ignores transparent pixels, so logos on a transparent background work.
- Runs entirely in the browser; the picture never leaves your machine.
Limits
- Dominant is not the same as important: a small logo in a large photo may not make the list — raise the colour count to find it.
- The clusters are averages, so the exact brand colour inside a photo will be slightly off; use the picker for a precise pixel.
- Animated GIFs are read from their first frame only.
Frequently asked questions
Why is my accent colour missing?
It covers too small a share of the picture to form its own group at this count. Increase 'How many colours' — or crop to the part of the image you care about — and it will appear.
Is the picture uploaded anywhere?
No. It is decoded and analysed in this browser tab; nothing is sent to a server.
Will I get the same colours every time?
Yes — the clustering is seeded from the image itself, so the same picture always gives the same palette.
Related tools
- Image Colour Picker — Pick a colour out of a picture and read it back
- Palette Generator — Harmonious colour schemes from a base colour
- Color Scale Generator — Turn one colour into an even 50–950 shade scale for CSS, Tailwind or SCSS
- Color Name Finder — The nearest CSS colour names to any colour, and a plain-words description
- Color Converter — Convert between hex, RGB, HSL, HWB, LAB, OKLCH and more
- Contrast Checker — WCAG contrast ratio for text and UI colours
More Colors & Design tools
- Color Converter — Convert between hex, RGB, HSL, HWB, LAB, OKLCH and more
- Contrast Checker — WCAG contrast ratio for text and UI colours
- Image Colour Picker — Pick a colour out of a picture and read it back
- Gradient Generator — Build linear, radial and conic CSS gradients
- Random Colour Generator — Random colours from a seed you can keep, in a range you choose
- Palette Generator — Harmonious colour schemes from a base colour
- Box Shadow Generator — Design a shadow, stack its layers and copy the CSS
- Border Radius Generator — Round corners evenly, one by one, or into a blob
- CSS Animation Generator — Build a keyframe animation and watch it run
- Cubic Bezier Editor — Plot an easing curve and feel what it does
- Color Scale Generator — Turn one colour into an even 50–950 shade scale for CSS, Tailwind or SCSS
- Color Mixer — Blend two colours in OKLCH, OKLab or sRGB and get the CSS color-mix() for it
- Color Name Finder — The nearest CSS colour names to any colour, and a plain-words description
- Color Blindness Simulator — See a palette as people with each colour-vision deficiency do, and find the pairs that clash
- Type Scale Generator — A modular type scale, fixed or fluid with clamp(), ready as CSS variables
- Text Shadow Generator — Soft, glow, neon, outline and retro text shadows with a live preview
- Glassmorphism Generator — Frosted-glass panels with backdrop-filter, a fallback and a live preview
- Clip Path Generator — Cut elements into triangles, hexagons, stars, arrows or your own polygon
- CSS Filter Generator — Build a CSS filter by eye, or find the filter that turns a black icon into any colour
- Design Tokens Converter — Turn W3C or Style Dictionary tokens into CSS variables, SCSS, Tailwind or JS
- Web Font Previewer — Set your own text in a font file before you ship it