Build a brand colour palette from your own product photos
Pull the real colours out of your product and packaging photos, give each one a job, and check every text pairing against WCAG contrast before it goes on an ad, a caption or an end card.
Plenty of small brands have a logo file and no colour list. The colours live in the product itself: the bottle, the label, the box, the fabric. When it is time to make an ad, a thumbnail or a caption style, someone eyeballs a hex code from a photo and hopes.
You can do better in about ten minutes. Pull the colours from photos of the real product, give each one a job, and check which pairs are readable as text. Our free colour palette extractor does the pulling and the checking in your browser, with nothing uploaded.
Why start from the product, not a mood board
People recognise your product by how it looks on the shelf or in their hand. An ad whose colours match the pack feels like the same brand at a glance, and one that drifts feels like a knock-off. A palette taken from the product is also honest about what you actually sell, which a mood board rarely is.
It works for services too. If you have no physical product, use your best screenshots, your shopfront or your team photos, whatever people already associate with you.
Step 1: pick and crop the photos
Choose two or three clean photos: the product on a plain background, the packaging face on, and one lifestyle shot you like. Then crop hard. The extractor counts every pixel you give it, so a bottle on a wooden table returns the table as one of your brand colours. Crop to the product and label, and the palette is the product.
Shoot in daylight or even light if you can. A warm lamp turns white packaging cream and every colour you pull will carry that tint.
Step 2: extract five to eight colours
Drop each photo into the extractor and ask for 5 or 6 colours for a clean product shot, or 8 for a busy one. It groups similar pixels and lists the average of each group, biggest first, with the share of the image each one covers. The start point is fixed, so the same photo always gives the same palette, and a small bright accent, like a red cap on a white bottle, gets its own swatch rather than being averaged away.
Run all your photos and look for the colours that repeat. Those are the brand. A colour that shows up in only one shot is usually the background or the light.
Step 3: give every colour a job
A palette is only useful when each colour has a role. Most brands need four:
- Background: the colour most of a layout sits on. Often the pack’s base colour, or a light neutral.
- Text: a dark colour that is readable on the background. Near-black works. A deep brand colour works better, if it passes the contrast check.
- Accent: the loud one, for a button, a price sticker or a single highlighted word.
- Support: one or two neutrals for boxes, dividers and secondary text.
Resist using everything the photo gave you. Five named colours with clear jobs will keep a hundred ads consistent. Twelve will not.
Step 4: check contrast before it goes on anything
Colour pairs that look fine on a big monitor can be hard to read on a phone in the sun, and much harder for people with low vision. The W3C’s Web Content Accessibility Guidelines give a number for this, the contrast ratio, which runs from 1:1 (the same colour twice) to 21:1 (black on white). The thresholds are:
| Normal text | Large text | |
|---|---|---|
| AA (SC 1.4.3) | 4.5:1 | 3:1 |
| AAA (SC 1.4.6) | 7:1 | 4.5:1 |
Large text means at least 18 point, or 14 point bold, under WCAG’s definition. And the numbers are hard lines: W3C’s guidance on 1.4.3 says a computed ratio should not be rounded, so 4.499:1 does not meet 4.5:1.
WCAG was written for web content, not for ads, but the reasoning carries over to any text on a screen, including captions burned into a video and the words on an end card.
A worked example
Say your packaging gives you a navy #1a3c6e, a cream #fdf6e3 and an orange #e07a2e.
The formula is (L1 + 0.05) / (L2 + 0.05), where L1 is the relative luminance of the lighter colour and L2 of the darker. Relative luminance runs from 0 for black to 1 for white. The navy works out to about 0.046, the cream to about 0.923 and the orange to about 0.300.
- Navy text on cream: (0.923 + 0.05) / (0.046 + 0.05) = 0.973 / 0.096, about 10.1 with these rounded figures, and 10.16:1 exact. That passes AAA at any size. This is your main pairing.
- Orange text on cream: (0.923 + 0.05) / (0.300 + 0.05) = 0.973 / 0.350, about 2.78:1. That fails even for large text. The orange should not carry words on cream.
- Black text on orange: (0.300 + 0.05) / (0 + 0.05) = 0.350 / 0.05, which is 7.0 with these rounded figures but 6.99:1 exact. That passes AA for all text but falls just short of AAA. Fine for a button label.
- Cream text on navy: the same pair as the first, so the same 10.16:1. Reversing a pair never changes the ratio.
So the roles almost pick themselves: cream background, navy text, orange as the accent shape with black words on it (navy on orange is only 3.65:1, which is AA for large text alone). The extractor shows this whole grid at once, every colour against every other plus white and black, each cell graded AAA, AA, AA large or Fail.
Step 5: write it down once
Export the palette as CSS custom properties or JSON and keep it next to your logo files. Rename the variables by job once you have decided: --brand-bg, --brand-text, --brand-accent read better than --color-3 a month later. Add one line under each saying which pairings passed, so nobody has to redo the check.
Then check the numbers against anything official you already have. A photo gives you the colour your camera saw, which is close to the printed pack, not identical to the ink spec. If your printer or designer has exact values, those win.
Using the palette in ads and posts
- Captions and subtitles: your text colour on a box in your background colour, or the reverse. Check the pair first.
- End cards: the background colour with the logo and one line in your text colour. The accent can fill a button shape behind a short call to action.
- Thumbnails and covers: one accent, one big readable word, lots of background.
- QR codes on packaging: a brand colour works if it is clearly darker than the pack. Our QR code generator warns when the contrast is low.
Where Hermoso fits
Hermoso is an AI marketing agent. It researches the ads already working in your market, makes on-brand image and video ads, posts and schedules to your own social accounts, and runs paid campaigns on your own ad accounts. When you add your brand from your website, it learns your products, logo and palette. Captions and end cards stay off unless you ask, and when you do, you can set the text, box and end card colours with hex codes, so the pairs you checked here are the ones that ship. It works in the web app, or inside Claude, ChatGPT and Cursor through its MCP server.
Questions people ask
How do I find the hex codes of my product colours?
Crop a clean photo to the product or packaging and drop it into a colour palette extractor. It lists the main colours as HEX, RGB and HSL. Run two or three photos and keep the colours that repeat.
What contrast ratio does text need?
Under WCAG 2.2, level AA needs 4.5:1 for normal text and 3:1 for large text, and AAA needs 7:1 and 4.5:1. Large text is at least 18 point, or 14 point bold.
Is 4.49:1 good enough for AA?
No. W3C says the ratio should not be rounded when compared with the threshold, so 4.499:1 does not meet 4.5:1.
How many colours should a brand palette have?
Enough to give each a job: usually a background, a text colour, one accent and one or two neutrals. Five named colours with clear roles keep ads consistent better than a long list.
Are colours from a photo exact?
No. They are what the camera recorded under that light, which is close to the product but not the same as a print or ink specification. If you have official values, use those.