Colour Palette Extractor
Pull the dominant colours out of any image and get them as ready-to-copy hex codes. Great for building a palette from a photo, matching a brand, or picking colours for a design. Runs entirely in your browser — nothing is uploaded.
or click to choose a file
Click any swatch to copy its hex code.
How to build a colour palette from an image
- Load an image. Drag a file onto the drop zone or click it to pick one from your device. Anything your browser can display works — JPEG, PNG, WebP, GIF, AVIF. A thumbnail appears in the panel so you can check you chose the right file.
- Choose how many colours you want. The slider runs from 2 to 12 and starts at 6. The palette rebuilds as you drag, so you can watch colours split apart and stop at the point where the set still looks distinct.
- Read the swatches in order. They are sorted by how much of the image each colour accounts for, so the first swatch is the dominant one and the last is the rarest of the set — useful in itself when deciding which colour should carry the design.
- Click a swatch to copy its hex code. The code goes straight to your clipboard and a short confirmation appears under the button.
- Or take the whole palette. “Copy all hex codes” copies every code, one per line, in the same dominance order — ready to paste into a stylesheet or a design tool.
How the colours are chosen
First the image is drawn onto a small off-screen canvas 80 pixels wide, with the height scaled to keep the proportions. That turns a multi-megapixel photo into a few thousand sample pixels: the palette barely changes, because a colour that dominates a picture still dominates it at thumbnail size, and the analysis finishes instantly even on a phone. Pixels that are more than about half transparent are discarded here, so a cut-out PNG is judged on its subject rather than its empty background.
The rest are reduced to your chosen number of colours by median-cut quantisation. Picture every pixel as a point floating in a three-dimensional space whose axes are red, green and blue. A beach photo becomes a loose cloud with one dense knot in the pale blues, another in the sandy yellows, and a thin trail between them.
The algorithm starts with one box containing every point and measures how far each box spreads along each axis. It takes the box with the largest spread on any single axis, sorts the points inside it along that axis, and cuts it in half at the middle. It repeats — always splitting whichever cluster is currently the most stretched out — until there are as many boxes as colours you asked for. Then it averages the pixels in each box, and that average becomes the swatch.
Why not just count pixel values and return the commonest? Because real images are full of gradients and noise, so the ten most frequent exact values in a seaside shot are ten near-identical blues from the sky and the sand never appears at all. Median cut divides by spread rather than popularity, so a smaller but genuinely different region gets a box of its own. It is the same family of technique GIF encoders have used for decades to squeeze a full-colour image into 256 fixed colours.
Reading a hex code
A hex colour such as #4A90D9 is three bytes written in hexadecimal — base 16, using 0–9 then A–F for the values ten to fifteen. The pairs are read as #RRGGBB: red, green, blue. Each pair runs from 00 to FF, which is 0 to 255 in decimal, so each channel has 256 levels and the notation covers 16,777,216 colours.
Higher numbers mean more light, not more pigment. #FFFFFF is all three channels at maximum, which is white; #000000 is all three at zero, which is black. Anything where the three pairs are equal is a neutral grey — #808080 in the middle, #EEEEEE an off-white, #222222 a near-black. That is a useful shortcut: three matching pairs means no hue at all.
CSS accepts two variations you will meet in other people’s stylesheets. The three-digit shorthand #F0C expands by doubling each digit into #FF00CC, which only works when both digits of every pair match. The eight-digit form #4A90D9CC adds a fourth pair for alpha, where FF is opaque and 00 fully transparent, with a matching four-digit shorthand. This tool outputs the plain six-digit form in capitals; case is irrelevant to a browser, so #4a90d9 and #4A90D9 are the same colour.
Turning a palette into a usable colour scheme
An extracted palette is raw material, not a finished scheme. The commonest mistake is treating all six or eight swatches as equals and scattering them evenly, which produces something busy and unresolved. The 60/30/10 rule transfers well to screens: roughly 60% of the visible area in one dominant colour, 30% in a secondary that supports it, and 10% in an accent used sparingly for the things you want clicked or noticed. The dominant colour is usually the quietest one, not the brightest.
From there, pick deliberately. Choose one colour to sit behind everything, and choose your text colour for legibility rather than harmony — often a near-black or near-white that is not in the extracted set at all. Keep one saturated colour in reserve as the accent and use it only for buttons, links and highlights. If two swatches look almost the same, drop one; three or four well-separated colours nearly always read better than eight. Nothing obliges you to use every colour the tool found just because it found it.
Contrast and accessibility
Two colours pulled from the same photograph usually look pleasant together. That says nothing about whether text in one is readable on the other; the two questions are independent. Colours from a single image often share a similar brightness, which is exactly what makes them harmonious — and exactly what makes them a poor text-and-background pair.
The measurable version is contrast ratio, calculated from the relative luminance of two colours on a scale from 1:1 (identical) to 21:1 (black on white). WCAG asks for at least 4.5:1 for normal body text and 3:1 for large text, meaning roughly 24px and above, or 18.66px and above if bold. Interface components and meaningful graphics such as icons and chart lines should also reach 3:1 against what surrounds them.
Run any text pairing through a contrast checker rather than trusting that the colours “go together”. Mid-tones are the usual failures: a medium blue on a medium green can be striking and completely unreadable. And colour should never be the only thing carrying meaning, since some of your readers will not distinguish red from green — pair it with a label, an icon or a shape.
Where extracted palettes are useful
The most obvious use is matching an interface to an image it already contains: pull the palette from the hero photo on a landing page, or the cover slide of a deck, and use those colours for headings, buttons and dividers so the result feels deliberate rather than assembled. The trick works in reverse too — to choose a background that suits a product photo without competing with it, take a muted swatch from the photo and desaturate it slightly.
Brand work is another: drop in a screenshot of a logo or an existing site and you have the exact codes in seconds, more accurately than matching by eye. For pixel art and game UI, where you are working to a deliberately restricted palette, extracting four to eight colours from a reference image gives you a coherent starting ramp. Illustrators use it to lift a scheme from a photograph they like, and it is a quick way to pick chart series colours that sit inside an existing house style — subject to the contrast caveats above.
Is my image uploaded?
No. The file is read locally through the HTML5 Canvas API, analysed in JavaScript inside your browser, and never sent anywhere. There is no upload step and no copy kept — closing or reloading the tab discards everything. You can prove it by loading the page, disconnecting from the internet and then dropping in an image: the palette still appears. That makes the tool safe for unreleased artwork, client material and private photographs. See our Privacy Policy for the detail.
Frequently asked questions
Why do more colours sometimes give me near-identical shades?
Because the algorithm has run out of genuinely different regions to separate. Once every distinct area has a box of its own, the next split can only divide one of those areas into two halves of the same colour family. An image with three clear colour zones gives three excellent swatches and then variations. If the palette looks repetitive, drag the slider down rather than up.
Why is the palette from my sunset photo entirely orange?
Because it measures area, not interest. In a sunset the warm sky occupies most of the frame, so most of the boxes end up in the warm part of the colour space. The fix is to crop first: cut the image down to the region whose colours you actually want, and the palette follows.
Is transparency handled?
Yes. Pixels that are more than roughly half transparent are skipped entirely, so a logo on a transparent background does not drag a phantom black or white into the palette. Pixels that are only slightly transparent are counted at their own RGB values, without being blended against whatever would sit behind them. Animated GIFs are analysed on the frame the browser displays first.
A colour I can clearly see is missing from the palette. Why?
Usually because it covers a very small part of the image. A bright red button occupying half a percent of a screenshot contributes only a handful of the sampled pixels, and it will be absorbed into a neighbouring box long before it earns one of its own. Ask for more colours, or crop to the area containing it.
Will I get the same palette every time?
Yes. Nothing in the process is random, so the same image at the same colour count always produces the same hex codes. Other tools will give different answers on the same photo and none of them is wrong — k-means clustering, octree quantisation and popularity counting all weigh a picture differently. Median cut is used here because it is fast, deterministic and good at preserving small but distinct areas of colour.
Working with images elsewhere? Try the pixel art converter, which uses a similar reduction to build a limited palette, or the favicon generator for turning an image into site icons. You can also browse all our free browser tools.