Design3 min read
Build a Brand Color Palette From One Image
Extract a brand color palette from an image you already have, then turn five hex codes into a system you can apply consistently.
The fastest way to build a brand color palette from an image is to extract the dominant colours from a photograph that already feels like your work, then cut the list down to five and give each one a job. The extraction takes seconds. The cutting down is the part that produces a brand rather than a swatch.
Extracting a brand color palette from an image
FreeMentioned in this article
Color Palette ExtractorThe colours already in your work, as hex you can paste.Give the extractor an image — a photograph you shot, a thumbnail that performed well, a product shot — and it returns the dominant colours with their hex codes. Photographs with a clear subject produce more useful palettes than busy scenes, where the algorithm averages toward mud.
Cutting five from twelve
An extracted palette is raw material. A usable brand palette has five roles, and every colour has to earn one:
| Role | What it does | How many |
|---|---|---|
| Primary | The colour people associate with you | 1 |
| Secondary | Supports the primary, used for large areas | 1 |
| Accent | Calls to action, highlights, the thing you want clicked | 1 |
| Neutral dark | Text, backgrounds in dark contexts | 1 |
| Neutral light | Backgrounds, space | 1 |
Two rules make this work. The accent must not be a shade of the primary — if it is, nothing stands out. And at least one neutral must be genuinely neutral, not a tinted version of the primary, or every design looks like a monochrome wash.
Contrast is a requirement, not a preference
A palette that fails contrast is a palette that excludes readers and gets penalised in accessibility audits. The threshold worth designing to is the WCAG AA level: 4.5:1 for normal text and 3:1 for large text (W3C).
The practical consequence for creators: pale accent colours on white backgrounds fail, and text on a photograph fails unless you put a solid or scrim behind it. Thumbnails and Pins are exactly where this goes wrong, because the text sits on the image.
Using it consistently
A palette only becomes a brand when it is applied the same way every time. Three places to write it down:
- Your editing tools — save it as a swatch set, not a note.
- Your templates — thumbnail, Story, carousel and Pin templates should already
carry the colours.
- Somewhere you can copy from on a phone, because half of your posting happens
there.
The templates are the leverage. A palette in a document is a good intention; a palette baked into a Story template is a decision you never have to make again — see safe zones for the other half of what those templates should carry.
FreeMentioned in this article
Story Safe-Zone SizerA 1080 × 1920 export, plus proof of what the app covers.Where a consistent palette actually pays
Thumbnails, because a recognisable colour treatment makes your videos identifiable in a crowded sidebar before the viewer reads anything — YouTube thumbnail size.
Pins, where a consistent overlay style is one of the few things distinguishing a Pin in an endless column of tall tiles — Pinterest Pin size.
Everything you export, which is easier when the export pipeline is one step:
FreeMentioned in this article
Social Image ResizerOne image, cropped to every size the networks actually use.How do I get a colour palette from an image?
Run the image through a palette extractor to get the dominant colours as hex codes, then reduce them to five and assign each a role.
How many colours should a brand palette have?
Five is plenty: primary, secondary, accent, and two neutrals. More than that and nothing is distinctive.
What contrast ratio do I need for text on a colour?
4.5:1 for normal text and 3:1 for large text meets WCAG AA. Text over a photograph usually needs a solid backing to reach it.
Should my palette be the same on every platform?
Yes. Recognition is the point, and it is built by repetition rather than by variety.
Pull the dominant colours out of an image you already have with the colour palette extractor.
Put it to work
Tools for the job you just read about
Free to run, most of them without an account.
FreeImages & video
Color Palette Extractor
The colours already in your work, as hex you can paste.
Extract →
FreeImages & video
Story Safe-Zone Sizer
A 1080 × 1920 export, plus proof of what the app covers.
Size for Stories →
FreeImages & video
Social Image Resizer
One image, cropped to every size the networks actually use.
Resize →
FreePreviews
Google SERP Snippet Preview
See your title and description as a Google result — on a desktop and a phone.
Preview →5 runs
FreeUtilities
Social Media URL Cleaner
Strip the tracking off a link — and see what each parameter was telling somebody.
Clean →1 runs
FreeAnalytics & growth
Instagram Money Calculator
What to charge for a post — priced the way a brand actually prices it.
Calculate →
Keep reading
More from the blog
Design4 min read
How to Screenshot a Tweet, Honestly
A phone screenshot of a post looks poor when scaled and proves nothing about who wrote it. Here is how to share a post as an image without misleading anyone.
Design5 min read
How to Download Podcast Cover Art at Full Size
Apple's public directory hands out a 600-pixel copy. The 3000×3000 the publisher submitted is at the same address with one number changed.
Design4 min read
Twitch Profile Picture Size (and How to Get the Full-Size One)
Upload a square image of at least 600×600. That is also the largest Twitch stores — and the page only ever publishes the 300, which is why avatars look soft when reused.