Color Palette Generator

Extract dominant colors from any image. Export as CSS variables, Tailwind config, SCSS, JSON, or Figma tokens.

100% private

Extract the dominant colours from an image and arrange them into a usable palette — choose 3 to 12 swatches, sampled with median-cut quantisation rather than a naive pixel count, so the result reflects how the image actually reads. Export as a CSS variable block or a JSON list. Useful for matching a design system to a hero photograph, or for setting moodboard palettes from references. The processing runs in your browser.

100% local — your image never leaves your device.

Drop an image or click to upload

JPG, PNG, WEBP — any photo or artwork

Next steps

Pick colors

Pick any color from an image — get HEX, RGB, HSL, and a full palette.

Compress image

Shrink images by up to 80% without visible quality loss.

Remove background

Remove backgrounds instantly with AI — no uploads, no signups.

Create favicon

Upload any image and get favicons in every size your site needs.

View all tools →
Runs right inside your browser tab. No uploads. Your files stay private.

How The Palette Generator Picks Colours From An Image

Color Palette Generator pulls representative colours out of an image using a median-cut algorithm — the same technique GIMP and Photoshop use to build their indexed-colour exports. The image is decoded into a Canvas, getImageData returns the raw RGBA pixel buffer, and the buffer is recursively split along its longest colour axis until the requested number of buckets remain. Each bucket is averaged to produce one swatch.
The pipeline is deliberately simple: there is no Web Worker and no WebAssembly. For typical photos under 12 megapixels, generating a 5-10 colour palette runs in well under a second on a phone. Very large images (for instance, a 50 MP camera RAW exported as JPEG) are downsampled before quantisation so the algorithm stays interactive — sampling every Nth pixel is usually indistinguishable from sampling them all when you only need 8 buckets.
Each extracted swatch is converted into HEX, RGB, and HSL forms in the browser. HSL is computed from the RGB triplet using the standard CSS Color Module 4 formula, which makes it easy to spot near-greys (low saturation) or to manually tweak hue and lightness in your design tool of choice without losing the source colour.
Export covers the formats designers and developers actually use day-to-day: copy each swatch's HEX value to the clipboard, or export the whole palette as CSS custom properties, SCSS variables, a Tailwind config snippet, Figma/W3C design tokens, JSON, or a self-contained SVG swatch sheet. The SVG export is handy for sharing a palette with a client because it renders the same way in every viewer.
All of this happens client-side. The image is loaded into an HTMLImageElement via a blob URL, drawn into an off-screen Canvas, sampled, and discarded when you reset. There is no upload, no analytics on the image content, and no server-side cache.
Median-cut is fast and stable but it is not perceptually weighted, so two photos with similar overall colour distributions can produce slightly different palettes if they have different image sizes. For colour-accurate brand work, treat the output as a starting point and nudge the swatches in a colour tool that operates in OKLCH or LAB.

Common Use Cases

01

Brand identity from photography

Pull a cohesive 5-7 colour palette from a curated brand photo and lock it in as the source of truth for UI, print, and merch.

02

Website theme bootstrap

Generate CSS custom properties from a hero image and paste them straight into a Tailwind theme or shadcn token file to scaffold a new site.

03

Figma design token export

Export W3C design tokens JSON and import it into Figma's Tokens Studio plugin so your tokens stay in sync with the source image.

04

Slide deck colour matching

Extract colours from a product screenshot and apply them to your Keynote or Google Slides theme so the deck and the product feel like the same family.

Frequently Asked Questions

A standard median-cut quantiser. Pixels are recursively split along the channel with the largest range until the requested number of buckets remain, then each bucket is averaged. It is the same family of algorithm used to build palettised GIFs and indexed PNGs.
Between 3 and 12. Going higher than 12 tends to produce near-duplicate swatches that are hard to distinguish, which is why the slider stops there.
Median-cut depends on the order in which buckets are split. Tiny differences in how the image is downsampled between sessions can swap two perceptually similar colours. Re-running with a different swatch count usually settles on a stable set.
Each swatch shows its HEX value which you can copy individually. The full palette can be exported as CSS custom properties, SCSS variables, a Tailwind config snippet, JSON, Figma/W3C design tokens JSON, and a self-contained SVG swatch sheet.
No. The image lives as a blob URL in your tab, is drawn into a Canvas to read pixels, and is discarded when you reset. There is no network call that carries pixel data.
Yes. Pixels with an alpha value below 50% are skipped during sampling so the palette reflects the visible image content, not transparent areas.
Not directly in this tool. Copy the HEX value into a colour editor like the CSS Gradient tool, the OKLCH picker built into Chrome DevTools, or your design app of choice and tweak from there.
There is no hard limit, but the image is decoded into a full-resolution Canvas first. On mobile devices, photos above roughly 8000 px on the long edge can hit the browser's Canvas size cap. Resize first with Image Resizer if that happens.
No. Median-cut works in sRGB, not OKLCH or LAB. Two perceptually similar colours can end up in different buckets if their RGB values are far apart, and vice versa. For perceptually weighted clustering, run the output through a tool that operates in LAB.
Maintained by the WebToolVerse teamLast updated Suggest an edit

Advertisement