Color Palette Extractor
Pull the dominant colours out of any photo as HEX, RGB and HSL codes.
Extract Dominant Colour Palettes and HEX Codes From Any Photo
Designers constantly need to pull a palette out of a reference image — a brand photo, a mood board, a screenshot of a site they admire. Doing it by eye with an eyedropper picks isolated pixels; what you usually want is the set of colours that actually dominate the image as a whole.
This extractor reads every pixel of your image through the Canvas API, quantises them into colour buckets, and ranks the results by how much of the image each one covers. You get a ranked palette with HEX, RGB and HSL values for each swatch, ready to paste into Figma, CSS or a design token file.
Key features
- Frequency-ranked palette — swatches ordered by how much of the image each colour actually occupies.
- Three colour spaces — HEX for CSS, RGB for canvas and image work, HSL for building tints and shades.
- Adjustable palette size — extract anywhere from 4 to 16 dominant colours.
- One-click copy — click any swatch to copy its HEX code straight to your clipboard.
This tool runs entirely inside your browser using native Web APIs. Your files and text are never uploaded to a server, never logged and never shared with third parties.
How to use: Color Palette Extractor
- Upload a photo
Drop in any JPG, PNG or WebP image. Larger images are sampled down first so extraction stays instant. - Choose how many colours you want
Five to eight swatches usually describes an image well. Raise the count to capture subtler accent colours. - Review the ranked palette
Each swatch shows its HEX, RGB and HSL values along with the share of the image it represents. - Copy the codes you need
Click a swatch to copy its HEX value, or use Copy All to grab the entire palette as a list.
Technical specifications
| Processing location | Entirely in your browser — no server round trip |
|---|---|
| Data uploaded | None. Files and text never leave your device |
| Price | Free — no account, no trial, no usage cap |
| Category | Media |
| Works offline | Yes, once the page has loaded |
| Browser support | Chrome 90+, Edge 90+, Firefox 90+, Safari 15+ |
| Interface languages | English, 中文, हिन्दी, Español, العربية |
Frequently asked questions
How are the dominant colours calculated?
Pixels are sampled across the image and grouped into buckets in RGB space, then the buckets are merged and ranked by pixel count. Near-white and near-black pixels are de-emphasised so the palette reflects the actual colours rather than the background.
Can I extract colours from a screenshot?
Yes — screenshots work especially well because they contain large flat regions of brand colour, which makes the dominant tones very clean.
What is the difference between HEX, RGB and HSL?
They describe the same colour three ways. HEX is the compact six-digit form used in CSS, RGB lists the red/green/blue channels from 0–255, and HSL gives hue, saturation and lightness — which is the easiest of the three for generating consistent tints and shades.
Is my photo uploaded anywhere?
No. The image is drawn to an in-memory canvas in your own browser and the pixel data is read locally. Nothing is transmitted.