Good colour schemes are often borrowed from the real world: a sunset, a forest walk, the exact blue in a client's brochure. Picking those colours by eye with an eyedropper is slow and inconsistent, because a single pixel rarely represents the colour you actually perceive. A palette extractor looks at the whole image and works out which colours dominate it.
Open an image here and you immediately get between 5 and 12 representative colours, ordered from most to least common, each with its HEX, RGB and HSL value and the share of the picture it covers. You can copy any value with a click or take the whole palette as CSS custom properties. The analysis runs in your browser, so the image is never uploaded.
How dominant colours are found
A typical photo contains tens or hundreds of thousands of distinct colours, most of them tiny variations of each other. Extracting a palette means grouping similar colours into clusters and reporting the average colour of each cluster. The size of each cluster tells you how much of the image that colour accounts for, which is shown as a percentage and as the proportional colour bar under the picture.
Two grouping methods are available. Median cut repeatedly splits the set of colours along whichever red, green or blue channel varies most, which is fast and tends to keep distinct colour regions apart. K-means starts from those median cut colours and then refines them, moving each centre to the average of the pixels closest to it until the groups settle. K-means is the default and usually gives the more balanced set; switching to median cut is a quick second opinion when a palette feels off. Both are deterministic, so the same image always produces the same palette.
Ways people use an image palette
Building a website or app theme
Pull the main colours of a hero photo or mood board as CSS variables, and you get background, accent and text candidates that already belong together.
Matching a brand from existing material
When a client has a logo or printed material but no style guide, extracting colours from a clean image or screenshot of it gives you starting HEX codes to confirm and document, instead of guessing from a screen.
Art, interiors and fashion inspiration
Painters, illustrators and interior designers often collect schemes from photographs, and the proportions matter: a palette that is 60 percent stone grey with a 5 percent rust accent feels very different from the same colours in equal amounts.
What the tool does with your image
Your browser decodes the image and draws it onto a small canvas of at most about 40,000 pixels, so a large photo is sampled rather than read in full, which keeps the analysis quick. Pixels that are mostly transparent are skipped, so the empty background of a PNG logo does not show up as a colour. The palette then recalculates instantly whenever you move the Number of colours slider, from 5 to 12 with 6 as the default, or switch the Method.
Each swatch in the list shows three buttons with its HEX, RGB and HSL value; clicking one copies that exact text. Below the list, the CSS variables panel writes the palette as a :root block with --color-1, --color-2 and so on, in the order shown. The Colour format switch above it chooses HEX, RGB or HSL for that block, and you can copy it or download it as palette.css.
Cómo usar esta herramienta
- Drop a PNG, JPG, WebP, GIF, BMP or AVIF image on the box above, click Choose image, or paste one from your clipboard.
- Move the Number of colours slider to get between 5 and 12 colours.
- Switch the Method between K-means and Median cut to compare the two palettes.
- Click any HEX, RGB or HSL value to copy it, or copy or download the CSS variables.
Limitations
- Colours are averages of clusters, so a palette colour may not match any single pixel exactly.
- Very small details, such as a thin red line on a large grey image, may be absorbed into a bigger cluster; raising the number of colours helps.
- Colours are read as your browser displays them, so values from wide-gamut photos can differ slightly from what a design app reports.
- One image is analysed at a time, and animated GIFs are read from their first frame.