Image Colour Palette
Extract, edit and export a colour palette from an image — 5 to 20 dominant colours, editable, as CSS or JSON.
Processed entirely in your browser. Your image is never uploaded to a server.
- 5 / 8 / 12 / 20 colour palettes.
- Each swatch shows HEX, RGB, HSL and its share of the image.
- Click a swatch to adjust its colour, or remove one you don't want, before exporting.
- Copy one colour, all HEX values, a ready-made CSS :root block, or structured JSON for a design-token pipeline or script.
- Runs in your browser.
Why this is private
- Processed entirely in your browser. Your image is never uploaded to a server.
- Open your browser's DevTools → Network tab while using this tool — you won't see a request carrying your input, because it never leaves your device.
- Nothing you enter is uploaded to a server or shared with us — the processing happens entirely on your device.
Overview
Pulls the dominant colours out of an image with a median-cut algorithm. Choose 5, 8, 12 or 20 colours, fine-tune or remove individual swatches, then copy each as HEX, copy the whole palette, or export as CSS custom properties or JSON.
How to use it
- 1Add an image.
- 2Pick how many colours you want.
- 3Tweak or remove swatches if needed, then copy individual swatches or export the whole palette.
Frequently asked questions
What people use it for
Build a site theme from a photoExtract 5–8 dominant colours and copy them straight out as CSS custom properties.
Feed a palette into a design-token pipeline or scriptExport as JSON — hex, RGB, HSL and share per swatch — ready to parse programmatically.
Create a mood-board palettePull the key colours from a reference image to guide a design or brand direction, then drop the near-duplicate or unwanted swatch before exporting.
Pick chart or slide colours that match an imageDerive an accent set from a hero photo so graphics feel part of the same page.
Related guides
- How to resize a photo and signature for online formsApplication portals want the photo and signature at exact pixel sizes and tiny file sizes. Here's how to hit both without an app.
- How to compress images for the web without them looking badWhy images make pages slow, how much quality you can drop before anyone notices, and a repeatable way to hit a size target.
- How to resize an image without losing qualityWhat 'without losing quality' really means when you resize, why enlarging is different from shrinking, and how to keep proportions intact.
- JPG, PNG or WebP: which image format should you use?A practical guide to picking an image format — what each one is good and bad at, and when to convert.
Related tools
All image toolsImage Colour PickerPick a colour from any pixel of an image and copy it as HEX, RGB or HSL.Color Palette GeneratorGenerate, lock, and export harmonious color palettes.Image Metadata ViewerSee an image's dimensions, format, EXIF, camera info and GPS location.Contrast CheckerCheck WCAG contrast ratio between two colors, including non-text and transparency.
Ready to use Image Colour Palette?
Image Colour Palette