Home / Colour Palette Generator

Colour Palette Generator — From Any Image

Every photo already contains a colour palette — the trick is pulling it out. Upload any image to this free colour palette generator and it will read the pixels, count the most-used colours, and show you the top six as swatches with their HEX, RGB and HSL values, ready to copy into your design. A built-in WCAG contrast checker then tells you whether any two colours work as text and background, so a palette that looks good is also readable. Everything happens in your browser: your image is drawn onto a canvas on your own device and never uploaded to a server, so photos, logos and screenshots stay private. This page builds palettes from images; to pick a colour by hand, use the colour picker instead.

How to Use

1. Upload an image. Click the drop zone and choose a JPG, PNG, WebP or GIF, or drag the file straight into the box. A small preview appears so you can confirm it is the right image.
2. Read your palette. The tool counts the colours in the image and shows the six most frequent as swatches, each with its HEX, RGB and HSL values. Similar shades are grouped together, so the palette shows the real colours of the image rather than hundreds of near-identical pixels.
3. Click a swatch to copy it. Clicking any swatch copies its HEX code to your clipboard, ready to paste into a design tool or a stylesheet. Use Set as A or Set as B on a swatch to send that colour to the contrast checker.
4. Check contrast. Pick a text colour and a background colour — from the palette or by typing a HEX value — and click Check Contrast. The ratio and the WCAG AA and AAA results tell you whether the pair is readable as normal text, large text, or not at all.

Worked Example

Imagine an image that is one solid block of pure red. Every pixel in it has the values red 255, green 0, blue 0, so when the tool counts the colours, one colour wins by a landslide and the palette’s top colour is #FF0000, RGB (255, 0, 0), HSL (0, 100%, 50%). A solid-colour image always produces that colour at the top of the palette. Now put black #000000 and white #FFFFFF into the contrast checker. The WCAG formula compares their relative luminance — 0 for black and 1 for white — giving 21.00:1, the highest possible ratio, which passes WCAG AAA for normal and large text. Pure red #FF0000 on white scores only 4.00:1, failing AA for normal text even though it looks bold, so red text on white needs a darker red or larger size. Try both pairs in the checker and you will see the same numbers.

Why Build a Palette From a Photo?

A palette taken from a photo already works together, because the colours came from the same light, the same scene and the same camera. Designers use this constantly: a travel photo gives the colours for a blog theme, a product photo gives the colours for its packaging, and a logo gives the colours for a whole website. Picking colours by hand often produces combinations that clash in ways you only notice after the site is built. The six colours give you a practical starting set — one or two dominant colours, supporting shades and an accent — and the contrast checker keeps you honest about readability, where most pretty palettes fail. Frequency is not importance, though: a tiny red button in a mostly blue photo is the accent your eye notices first, but it ranks low because it covers few pixels, so watch for small, vivid colours the count undervalues.

Tips for a Usable Palette

Use the most frequent colour as your background, the second as your secondary surface, and the brightest colour as the accent for buttons and links — the 60-30-10 rule, which a photo palette follows naturally. Check every text-and-background pair before you commit: a pair that passes for large headings at 3:1 may still fail for body text, which needs 4.5:1. If two swatches look almost identical, drop one. Finally, save the HEX codes in a note — the page stores nothing, and closing the tab loses your palette.

Frequently Asked Questions