Extract brand colours from a logo so you can build a matching Tailwind or CSS custom-properties config. Sample a hero image to seed a design system's colour palette. Build a moodboard palette from artwork, photography, or screenshots. Quickly audit whether a design hero image and the page's accent colour are visually aligned. Generate a starting point for a website redesign based on a mood or reference image. Pull colours from a client's existing branding materials before building their design system.

Down-sample. The image is shrunk to keep pixel count manageable and speed up processing. Find the longest axis. The algorithm looks at the colour distribution across red, green, and blue channels and picks the one with the widest range. Split at the median. Pixels are sorted along that axis and divided in half. Recurse. Each half is split again along its longest axis, repeating until you have the number of colour buckets you requested. Average each bucket. The final palette is the mean hex colour of each group. This approach is fast, deterministic, and works well for most images. The trade-off is that it prioritises frequency over perceptual harmony — if you need colours that are theoretically complementary or analogous, you'll want a designer to refine the output.

Transparent regions are skipped. Pixels with alpha below 50% don't contribute to the palette. This is useful for logos on transparent backgrounds, but watch for it if you expect white or a background colour to appear. Photos with one dominant colour give you shades, not range. A beach shot with lots of sky will return several blues and near-blues rather than a varied palette. Crop to a more colourful region if you want diversity. The algorithm picks common, not beautiful. Median-cut extracts what's there, not what's harmonious. For colour-theory work (mood palettes, accessible contrast checks), treat the output as a first draft and apply design judgment. Asking for more buckets than colours exist gives near-duplicates. A two-colour logo asked for ten buckets will return ten results — most will be very similar. If you're working with simple artwork, request fewer swatches. Compression artefacts show up. Heavily compressed JPEGs can introduce noise that fragments the palette slightly. Try a higher-quality export if your result looks scattered.

Copy individual hex codes to your clipboard. Export as CSS custom properties ( --color-0: #abc123; etc.) ready to paste into your stylesheet. Generate a Tailwind colors object ready to merge into your config.

Color Palette Extractor

Extract the dominant colors from any image in your browser. 5–8 swatches, hex codes, copy-paste CSS variables. Files never leave your device.

Pick or drop an image (PNG, JPG, WebP)

Swatches 6

🔒 Files never leave your browser — no upload, no server, no tracking.

Preview

No image yet.

Result

CSS custom properties

What is this for?

This tool reads an image, samples its pixels, and groups them into 5–8 dominant colours using a median-cut quantization algorithm. You get back a small set of representative hex codes that capture the image's colour story — useful for extracting brand colours from logos, seeding design systems, or building moodboards from photography. Everything runs in your browser; your image never leaves your device.

When to use it

Extract brand colours from a logo so you can build a matching Tailwind or CSS custom-properties config.
Sample a hero image to seed a design system's colour palette.
Build a moodboard palette from artwork, photography, or screenshots.
Quickly audit whether a design hero image and the page's accent colour are visually aligned.
Generate a starting point for a website redesign based on a mood or reference image.
Pull colours from a client's existing branding materials before building their design system.

How it works

Down-sample. The image is shrunk to keep pixel count manageable and speed up processing.
Find the longest axis. The algorithm looks at the colour distribution across red, green, and blue channels and picks the one with the widest range.
Split at the median. Pixels are sorted along that axis and divided in half.
Recurse. Each half is split again along its longest axis, repeating until you have the number of colour buckets you requested.
Average each bucket. The final palette is the mean hex colour of each group.

This approach is fast, deterministic, and works well for most images. The trade-off is that it prioritises frequency over perceptual harmony — if you need colours that are theoretically complementary or analogous, you'll want a designer to refine the output.

Common gotchas

Transparent regions are skipped. Pixels with alpha below 50% don't contribute to the palette. This is useful for logos on transparent backgrounds, but watch for it if you expect white or a background colour to appear.
Photos with one dominant colour give you shades, not range. A beach shot with lots of sky will return several blues and near-blues rather than a varied palette. Crop to a more colourful region if you want diversity.
The algorithm picks common, not beautiful. Median-cut extracts what's there, not what's harmonious. For colour-theory work (mood palettes, accessible contrast checks), treat the output as a first draft and apply design judgment.
Asking for more buckets than colours exist gives near-duplicates. A two-colour logo asked for ten buckets will return ten results — most will be very similar. If you're working with simple artwork, request fewer swatches.
Compression artefacts show up. Heavily compressed JPEGs can introduce noise that fragments the palette slightly. Try a higher-quality export if your result looks scattered.

Output formats

Copy individual hex codes to your clipboard.
Export as CSS custom properties (--color-0: #abc123; etc.) ready to paste into your stylesheet.
Generate a Tailwind colors object ready to merge into your config.