Free browser tool

Free Color Palette Extractor

Pull the dominant colours out of any image — a screenshot, photo, logo or mood board — and get ready-to-copy HEX, RGB and HSL codes. Pick exact pixels with the eyedropper, then export the palette as CSS variables, Tailwind config, JSON or a PNG strip. Nothing is uploaded.

No upload
No sign-up
HEX · RGB · HSL
CSS & Tailwind export

Drop an image here, click to browse, or paste with ⌘V

PNG, JPG, WebP · screenshots, photos, logos, mood boards

Your files never leave your device — 100% private, no cloud upload

How to get the colour palette from an image

Drop or paste an image

Drag in a PNG, JPG or WebP, or paste a screenshot straight from your clipboard. Choose how many colours to extract — 4 to 16.

Inspect the colours

Swatches are sized by coverage. Click one to see HEX, RGB, HSL and CMYK, or click anywhere on the image to pick a precise pixel.

Copy or export

Copy a single value, the whole palette as CSS variables, Tailwind or JSON, or download a labelled PNG for your mood board.

Ways creators use extracted palettes

On-brand video thumbnails

Grab the accent colours from a product screenshot and reuse them for thumbnail text, arrows and backgrounds so everything matches.

Slide decks and OG images

Build a deck or link-preview image around the colours of the app or website you're presenting.

Design from a photo

Turn a landscape or product photo into a five-colour scheme for a landing page or a poster.

Captions and overlays that fit

Choose subtitle and lower-third colours that complement your footage instead of clashing with it.

Frequently Asked Questions

How do I extract colours from an image?

Drop an image into the tool or paste a screenshot with ⌘V / Ctrl+V. The dominant colours are detected instantly and shown as a palette, sized by how much of the image each colour covers. Click any swatch for its HEX, RGB and HSL values, or click on the image itself to pick an exact pixel.

How does the palette extraction work?

The image is downsampled and quantised with the median-cut algorithm, which repeatedly splits the colour space along its widest axis until it has the number of clusters you asked for. Each cluster's average becomes a palette colour. It is deterministic and handles screenshots — a large flat background plus a few accents — much better than random-seeded k-means.

Can I copy the palette into my CSS or Tailwind config?

Yes. One click copies the palette as CSS custom properties (--color-1 …), a Tailwind colors object, JSON with HEX/RGB/HSL, or a plain comma-separated HEX list. You can also download a labelled PNG strip for a mood board or slide.

Why isn't the exact colour I expected in the palette?

The palette shows averages of colour clusters, so a small logo or a thin line may be absorbed into a nearby colour. Increase the number of colours to 12 or 16, or click directly on the spot in the image to sample that exact pixel.

Is my image uploaded anywhere?

No. The image is analysed entirely in your browser with the canvas API. It never leaves your device, so unreleased designs and confidential screenshots are safe.

What can I use an extracted palette for?

Matching a thumbnail or slide deck to a brand screenshot, building a colour scheme from a photo, recreating a competitor's or client's palette from their website screenshot, or choosing an accent colour for video overlays and captions that fits the footage.