Upload any image and instantly extract its dominant colour palette — up to 12 colours with HEX, RGB and HSL codes. 100% private, runs entirely in your browser.
Drag and drop any image onto the tool, or click to browse. Supports JPEG, PNG, WebP and GIF up to 20 MB. Your image never leaves your browser — all analysis happens locally using the Canvas API.
Select how many colours you want extracted — from 4 to 12. More colours reveals subtle tones; fewer colours gives you the most dominant hues. The palette updates instantly when you change the count.
Click any colour swatch to copy its HEX code. Switch between HEX, RGB and HSL formats using the format toggle. Use Export Palette to download all colours as a JSON, CSS or plain text file.
The tool draws your image onto an HTML5 Canvas element, reads every pixel with getImageData(), then clusters similar colours using a k-means-style median cut algorithm. This groups millions of unique pixel colours into a small set of representative swatches — giving you the actual dominant colours rather than just the most frequent pixels.
No. All processing happens entirely in your browser using the Canvas API and JavaScript. Your image is never sent to any server, never stored, and never leaves your device. This makes the tool safe to use with private photos, confidential design assets, and sensitive screenshots.
The tool supports any image format your browser can display — typically JPEG, PNG, WebP, GIF and AVIF. The file is loaded via a local FileReader URL and rendered on a canvas, so format support follows your browser's native capabilities.
An average colour blends all pixels into one flat tone — often a muddy grey or beige for most photographs. Dominant colours are the most visually significant hues that actually appear in the image. The median cut algorithm used here clusters pixels by colour similarity and picks the centroid of each cluster, which gives you the palette a human eye would naturally identify.
If an image has a lot of variation within one colour family (e.g. many shades of blue sky), the algorithm may produce several nearby blues. Reducing the palette count forces the algorithm to merge more clusters, which typically reduces duplication. You can also use the Sort by Hue view to group similar colours together.
Yes. Transparent pixels (alpha = 0) are automatically excluded from the analysis so they don't skew the palette towards white or black. Semi-transparent pixels are blended against white before sampling, matching how they would visually appear.
HEX is a six-character code like #a855f7 used in HTML and CSS. RGB (Red, Green, Blue) expresses a colour as three values from 0–255. HSL (Hue, Saturation, Lightness) expresses colour using a perceptual model — Hue is the colour wheel position (0°–360°), Saturation is colour intensity (0–100%), Lightness is brightness (0–100%). HSL is often easier to reason about when designing colour systems.
Use the Export button to download your palette as CSS variables, a JSON colour map, or a plain text list. The CSS export produces a ready-to-paste :root block with --color-1 through --color-n variables. JSON export is compatible with design tokens workflows in Figma, Style Dictionary and Tailwind config files.
