Best Color Combinations for Social Media Posts
Seven two- and three-colour combinations that work for social posts, with hex codes, contrast tips and a simple way to build a palette from your own photos.
The colour combinations that work best on social media are simple: two or three colours with strong contrast between text and background, used the same way across every post. Pairs such as off-white with navy, black with one bright accent, or cream with terracotta are easy to read on a small phone screen and quickly become recognisable. Below are seven combinations with hex codes, the mistakes to avoid, and how to build a palette from your own photos.
Why a Small Palette Works
People scroll quickly, and colour is one of the first things they register before they read anything. Posts that stand out tend to share a few traits:
- Strong contrast between the subject or text and the background
- A limited palette, rarely more than three colours
- Consistency, so followers recognise your posts before they see your name
- One accent reserved for the thing you want noticed, such as a headline or button
A common starting ratio is 60/30/10: about 60% dominant colour, 30% secondary or neutral, and 10% accent. It is a guide, not a rule, but it stops the accent from taking over.
Seven Combinations That Work
Black with one bright accent
Black or near-black with yellow, hot pink or bright green gives maximum contrast. One accent feels deliberate. It suits tech, finance, fitness and announcement posts.
Off-white with dark navy
Cream or ivory with deep navy looks calm and premium. It suits agencies, consultants, editorial content and quote cards.
Soft beige with olive green
A latte beige with sage or olive feels natural and quiet. It suits wellness, sustainable products and home brands.
Hot pink with electric blue
Magenta and cyan are loud and energetic. They suit music, events, beauty and youth-focused brands — but they tire the eye quickly, so give them plenty of white or black space.
Cream with terracotta
Soft cream and burnt orange feel warm and friendly. They suit food, hospitality and lifestyle content.
Forest green with cream
Deep green on off-white reads as thoughtful and upmarket. It suits skincare, eco-fashion and premium services.
Black, white and one accent
Black text on white with a single red or blue accent is built for reading rather than mood. It suits news, tips, carousels with lots of text and B2B content.
Starter Palettes With Hex Codes
| Mood | Background / main | Accent / text |
|---|---|---|
| Premium minimal | #F5F1E8 | #1A1A1A |
| Wellness organic | #E8DFD3 | #6B7B5F |
| Tech bold | #000000 | #FFC700 |
| Friendly warm | #FDF6EE | #C76B3E |
| Editorial | #F2EFEA | #1B1F3A |
| High energy | #FF006E | #00C9FF |
Treat these as starting points. Before using any pair for text, check its contrast (see below) — some, like olive on beige, work for shapes and backgrounds but are too soft for small text.
Contrast and Accessibility
Check the contrast ratio
The WCAG contrast guideline asks for at least 4.5:1 between normal text and its background, and 3:1 for large text. Social posts are viewed small, often outdoors on a bright phone screen, so treat those numbers as the minimum. Free contrast checkers let you paste two hex codes and see the ratio instantly.
Don't rely on hue alone
Colour vision deficiency affects roughly 1 in 12 men and a smaller share of women, and red-green confusion is the most common type. If two elements differ only in hue — a red "no" and a green "yes" — some viewers will not see the difference. Make sure they also differ in lightness, or add a label or icon.
Combinations to Avoid
Too many saturated colours
Bright red, bright green and bright blue in one post fight for attention. Pick one bright colour and mute the rest.
Grey on grey
Light grey text on white or mid-grey on dark grey looks washed out and is hard to read. Add at least one stronger colour for the text or the key element.
Every colour in the brand kit at once
Using all six brand colours in one graphic makes it look busy. Choose a subset for each campaign and keep the rest for other contexts.
Effects that hurt legibility
Gradient fills, thin outlines and patterned backgrounds behind text all reduce readability at small sizes. Use a solid block or a semi-transparent overlay behind text instead.
Platform Notes
Design feed posts at 1080×1080 (square) or 1080×1350 (4:5 portrait), and stories or reels covers at 1080×1920. Keep the palette consistent across carousel slides so they read as one piece. The resize tool has Instagram presets if you need to adjust an existing graphic.
Pinterest recommends a 2:3 ratio, such as 1000×1500. Tall pins give you room for a headline block in a contrasting colour above or below the photo.
Restrained palettes — navy, white, grey with one accent — fit the professional context. Text-heavy carousels benefit most from the black-white-accent approach.
X (Twitter)
Images appear small in the timeline, so contrast matters more than subtle colour choices. Avoid thin fonts and pale text.
Building a Palette From Your Own Photos
The easiest way to get a palette that suits your content is to take it from your best photos.
- Pick a photo that represents your brand — a product shot, your shop interior, a landscape you often post.
- Open the Image EditPro colour palette tool and add the photo. It lists the dominant colours with hex codes, and the image stays in your browser.
- Choose one dark colour for text, one light colour for backgrounds and one stronger colour as the accent.
- Check the text/background pair for contrast and adjust lightness if needed.
- Save the hex codes in your design app's brand kit or a note.
Other approaches work too. Start from the colour of your product (a green tea brand might use cream, sage and a dark forest accent), or look at competitors' posts and choose a palette that is clearly different from theirs.
Applying the Palette Consistently
- Use the same background and text colours for each recurring post type — tips, quotes, announcements.
- Reserve the accent for one element per post.
- Test every design at thumbnail size on a phone before publishing; text that looks fine on a monitor often disappears in a feed.
- Carry the palette into thumbnails and covers too. Our guide to fonts for thumbnails and posters covers the typography side, and how to make a YouTube thumbnail that gets more clicks applies the same contrast ideas to video.
Frequently Asked Questions
How many colours should a social media post use?
Two or three is enough for most posts: one dominant colour, one neutral and one accent. More colours compete for attention and make a feed look inconsistent.
What contrast ratio should text on a post have?
The WCAG guideline for normal text is a contrast ratio of at least 4.5:1, and 3:1 for large text. Social posts are often viewed small on phones, so aim at or above those figures.
How do I get the hex codes of colours in a photo?
Open the Image EditPro colour palette tool, add the photo and it lists the dominant colours with hex codes you can copy into Canva, Figma or any design app. The image is processed in your browser.
Which colour combinations should I avoid?
Avoid low-contrast pairs such as light grey on white, several highly saturated colours fighting each other, and red-green pairings that rely only on hue, since many colour-blind viewers cannot tell them apart.