How the colours are picked
The tool draws a small copy of your image, at most 160 pixels on its longest side, and counts every pixel that is not transparent. It then groups similar pixels together with k-means clustering and reports the average colour of each group, largest group first. The percentage on each swatch is how much of the image that group covers.
The starting point is fixed rather than random: it begins with the most common colour, then keeps adding the colour farthest from the ones it already has. So the same image gives the same palette every time, and a small bright accent, like a red logo on a white box, gets its own swatch instead of being averaged into the background.
Ask for 5 to 8 colours. A product shot on a plain backdrop usually needs 5 or 6. A busy lifestyle photo reads better at 8. If the image has fewer distinct colours than you asked for, the tool says so and shows the ones it found.
Reading the contrast matrix
Every colour is paired with every other one, plus plain white and black, and each cell shows the contrast ratio for text in the row colour on a background in the column colour. The ratio follows the WCAG definition: (L1 + 0.05) / (L2 + 0.05), where L1 and L2 are the relative luminance of the lighter and the darker colour. It runs from 1:1 (the same colour twice) to 21:1 (black on white).
The labels are the thresholds WCAG sets:
- AA: at least 4.5:1 for normal text and 3:1 for large text (Success Criterion 1.4.3).
- AAA: at least 7:1 for normal text and 4.5:1 for large text (Success Criterion 1.4.6).
- Large text means at least 18 point, or 14 point bold (WCAG’s definition of large scale).
A cell marked AA large is fine for a big headline and too faint for a caption. W3C’s explanation of 1.4.3 also says the ratio should not be rounded, so 4.499:1 does not meet 4.5:1. The tool judges the exact number and shows it cut to two decimals, never rounded up.
A worked example
Say the photo gives you a navy of #1a3c6e and a cream of #fdf6e3. The navy’s relative luminance works out to about 0.046 and the cream’s to about 0.923. The ratio is (0.923 + 0.05) / (0.046 + 0.05), which is about 10.1:1 with those rounded figures and 10.16:1 with the exact ones. That passes AAA for all text, so navy text on a cream end card is safe at any size. Put a mid orange like #e07a2e on the same cream and the ratio drops to 2.78:1, which fails even for large text. Save the orange for a button with black text on it (6.99:1, which is AA but just short of AAA), or for a shape with no words.
Using the export
The CSS export is a :root block of custom properties, --color-1 for the colour covering the most of the image and so on down. The JSON has each colour’s hex, RGB, HSL and its share of the image, which is easy to paste into a design token file or hand to a script. Rename the variables once you know which colour is the background, which is the text and which is the accent.
What this tool does not do
It does not know which colours are your brand. A photo of your product on a wooden table will include the table. Crop to the product or packaging first if you want only its colours. It also cannot tell you exact print colours: the numbers are the pixels in the file, after your camera and any editing, so check them against your brand guide before you publish them. And it judges text contrast only. WCAG has separate rules for icons and interface parts, which this matrix does not grade.
If you would rather not do this by hand
Hermoso is marketing on autopilot: it researches the ads already working in your market, makes on-brand image and video ads, schedules the posts and runs paid campaigns on your own ad accounts. When you add your brand from your website, it learns your products, logo and palette, and you can set caption and end card colours with hex codes. It works in the web app, or inside Claude, ChatGPT and Cursor through its MCP server.
Free tools: Social media size guide · Instagram Grid Maker · Open Graph generator
Frequently asked questions
How do I get a colour palette from a photo?
Drop the photo into the tool and pick how many colours you want, from 5 to 8. It groups similar pixels and shows the average colour of each group as HEX, RGB and HSL, largest first, with a copy button on each.
What contrast ratio do I need for text?
WCAG 2.2 level AA asks for at least 4.5:1 for normal text and 3:1 for large text. Level AAA asks for 7:1 and 4.5:1. Large text is at least 18 point, or 14 point bold.
Is 4.49:1 close enough to pass AA?
No. W3C says the computed ratio should not be rounded when compared with a threshold, so 4.499:1 does not meet 4.5:1. The tool judges the exact number.
Why do I get the same palette every time?
The clustering starts from a fixed point, the most common colour, and then adds the colour farthest from those already chosen. There is no random start, so one image always gives one answer.
Is my image uploaded?
No. It is read with your browser's own file reader and counted in a canvas on your device. Nothing is sent anywhere or stored.
Hermoso makes the ads, schedules the posts and runs the campaigns. Start free, 250+ earnable free credits, no card.
Start free → See pricing