imbuz
Contact All tools

Color palette extractor

Design tools

Every photo has a palette in it

Drop an image to pull out its dominant colours, ordered by how much of the picture each one covers — then copy them as CSS, Tailwind or JSON.

Drop an image or browsePhoto, screenshot or artwork — analysed in your browser, nothing uploaded

About this tool

Colours measured, not eyedropped

An eyedropper gives you one pixel; a palette needs the colours that define the whole image. This samples the image in your browser and groups its pixels in OKLab — a colour space where distance matches how different colours look — so it finds the colours people actually see, not just the most common greys. You get each colour’s share of the image and its HEX, RGB, HSL and OKLCH values, and you can copy the set as CSS custom properties, a Tailwind colours block or JSON, or download it as an image.

  • Free, no sign-up
  • Runs in your browser
  • Nothing uploaded

Perceptual grouping

Clustering in OKLab separates colours the way eyes do, so a small but vivid accent is not swallowed by a large dull area.

Ready to paste

CSS variables, a Tailwind theme.extend.colors block, JSON or plain lists, in the colour format you use.

Shareable card

Download the image and its palette as one PNG for a mood board or a client email.

Step by step

How to get a colour palette from an image

  1. Add an image

    Drop a photo, screenshot or artwork.

  2. Choose how many colours

    Five to eight is typical. Click any swatch to copy it.

  3. Export

    Copy the palette as CSS, Tailwind or JSON, or download the palette card.

Get the most out of it

Tips for the best results

  • Fewer colours, stronger paletteFive colours usually make a more usable scheme than twelve.
  • Check contrast nextPair the darkest and lightest swatches in the contrast checker before using them for text.
  • OKLCH for design tokensOKLCH keeps lightness consistent when you make tints and shades.
  • Crop out bordersA white frame or a big sky can dominate — crop to the part you care about.

Keep going

More free design tools

See every design tool →
Contrast CheckerWCAG 2 and APCA, with fixes Font Previewer & PairingTest your font, weights and pairings Font IdentifierSuggest the Google Font in an image AI Image Upscaler2× and 4× AI upscaling in the browser Mockup GeneratorScreenshots in browser and phone frames Placeholder Image GeneratorAny size, colour and label BlurHash & LQIP GeneratorTiny blurred placeholders for lazy loading Image CompressorAVIF, WebP, JPEG — measured before you save Image ResizerExact pixels, a percentage, or a preset

Questions

Questions about this tool

Everything here runs in your browser — nothing you add is uploaded. More in the general FAQ.

How do I extract colours from an image?

Drop the image here. Its pixels are grouped into the number of colours you choose, ordered by how much of the image each covers. Click a swatch to copy it, or export them all.

What is OKLCH?

A modern CSS colour format — lightness, chroma, hue — designed so equal changes look equally different. It is supported by every current browser and is popular for design tokens.

Can I export to Tailwind?

Yes. The Tailwind export is a theme.extend.colors block you can paste into tailwind.config.js, with names you can edit.

Why are the colours different from an eyedropper?

An eyedropper reads one pixel, which is often noise. The palette averages similar pixels, so each colour represents a whole area of the image.

Is my image uploaded?

No. The image is analysed in your browser.