Color combinations & palette ideas
67 combinations that work, each with hex codes. Two-color pairs show their contrast ratio; five-color palettes open straight in the generator so you can tweak them.
Two-color combinations
The big number is the WCAG contrast ratio of the dark color as text on the light one. AA needs 4.5:1 for body text.
- Aa7.90:1AAANavy & gold
- Aa13.37:1AAABlack & yellow
- Aa10.53:1AAAForest & cream
- Aa7.93:1AAABurgundy & blush
- Aa4.78:1AATeal & coral
- Aa10.84:1AAACharcoal & mint
- Aa8.43:1AAACobalt & white
- Aa9.07:1AAAPlum & sage
- Aa5.35:1AARust & sand
- Aa12.37:1AAAPurple & lime
- Aa6.05:1AARed & off-white
- Aa7.79:1AAASlate & peach
- Aa10.04:1AAAEspresso & sky
- Aa7.40:1AAAEmerald & ivory
- Aa11.67:1AAAMidnight & lavender
Five-color palette ideas
- Blue + orange (complementary) — Maximum energy; keep orange for accents.Edit · More like this
- Blue + white + sand — Coastal and clean, good for hospitality.Edit · More like this
- Blue + coral — Friendly contrast that stays professional.Edit · More like this
- Blue + grey (monochrome) — Classic SaaS interface palette.Edit · More like this
- Green + pink (complementary) — Botanical and bold.Edit · More like this
- Sage + terracotta — Earthy and warm, popular for interiors.Edit · More like this
- Forest + gold — Premium and outdoorsy.Edit · More like this
- Mint + navy — Fresh fintech look.Edit · More like this
- Purple + yellow (complementary) — High contrast, playful.Edit · More like this
- Lavender + sage — Soft and natural.Edit · More like this
- Plum + gold — Luxury and evening events.Edit · More like this
- Purple + teal — Modern tech palette.Edit · More like this
- Red + teal (complementary) — Striking and balanced.Edit · More like this
- Red + navy + white — Classic and patriotic.Edit · More like this
- Burgundy + blush — Romantic and editorial.Edit · More like this
- Red + charcoal — Bold, sporty and modern.Edit · More like this
- Pink + green (complementary) — Botanical, fashion-forward.Edit · More like this
- Blush + grey — Soft and sophisticated.Edit · More like this
- Hot pink + orange — Loud, summery and fun.Edit · More like this
- Pink + navy — Preppy and crisp.Edit · More like this
- Yellow + purple (complementary) — Maximum contrast.Edit · More like this
- Mustard + navy — Confident and grown-up.Edit · More like this
- Yellow + grey — Pantone’s 2021 pairing, industrial.Edit · More like this
- Lemon + teal — Fresh and tropical.Edit · More like this
- Orange + blue (complementary) — The classic high-energy pair.Edit · More like this
- Burnt orange + cream + teal — Retro and warm.Edit · More like this
- Orange + charcoal — Industrial, sporty.Edit · More like this
- Peach + sage — Soft and natural.Edit · More like this
- Brown + sky blue — Complementary and outdoorsy.Edit · More like this
- Brown + sage + cream — Earthy, organic.Edit · More like this
- Chocolate + blush — Soft and cosy.Edit · More like this
- Brown + teal — Warm-cool balance.Edit · More like this
- Grey + yellow — Bright and modern.Edit · More like this
- Grey + blush — Soft and calm.Edit · More like this
- Grey + navy — Corporate and serious.Edit · More like this
- Grey + teal — Clean interface palette.Edit · More like this
- Sorbet (pastel) — Pastel Color PaletteEdit · More like this
- Nursery (pastel) — Pastel Color PaletteEdit · More like this
- Macaron (pastel) — Pastel Color PaletteEdit · More like this
- Spring (pastel) — Pastel Color PaletteEdit · More like this
- Ember (warm) — Warm Color PaletteEdit · More like this
- Terracotta (warm) — Warm Color PaletteEdit · More like this
- Harvest (warm) — Warm Color PaletteEdit · More like this
- Peach (warm) — Warm Color PaletteEdit · More like this
- Glacier (cool) — Cool Color PaletteEdit · More like this
- Lagoon (cool) — Cool Color PaletteEdit · More like this
- Dusk (cool) — Cool Color PaletteEdit · More like this
- Nordic (cool) — Cool Color PaletteEdit · More like this
- Stone (neutral) — Neutral Color PaletteEdit · More like this
- Linen & oak (neutral) — Neutral Color PaletteEdit · More like this
- Slate (neutral) — Neutral Color PaletteEdit · More like this
- Mushroom (neutral) — Neutral Color PaletteEdit · More like this
What makes a combination work
Lightness contrast first. Hue gets the attention, but lightness decides readability. Every reliable combination has a clearly dark and a clearly light member; the contrast checker turns that into a number.
A rule for the hues. Complementary pairs are the boldest, analogous ones the calmest, and split-complementary sits in between. Try them on the color wheel or read the complementary and analogous guides.
Proportions. The same five colors can look calm or chaotic depending on how much of each you use; the 60-30-10 rule is a reliable starting point.
Need one for a specific project? Describe it in the AI color palette generator, or pull one out of a photo with the palette-from-image tool.
Frequently asked questions
What are the best color combinations?
Combinations that work almost always have one clearly dark color, one clearly light color and one saturated accent. Classic pairs include navy and gold, black and yellow, forest green and cream, and teal and coral. Each two-color pair on this page shows its WCAG contrast ratio so you can see which ones are readable as text.
What two colors go well together?
Colors opposite each other on the color wheel (blue and orange, purple and yellow, red and green) give the most energy. Pairs with a big lightness difference, such as navy and cream, are the safest for text. Aim for at least 4.5:1 contrast when one color is text on the other.
How do I choose a color combination for a website or brand?
Start from one brand color, add a near-black and a near-white tinted toward it, then choose an accent from a harmony rule (complementary or split-complementary). Check every text/background pair for 4.5:1 contrast and use the 60-30-10 rule for proportions.
What colors should not be used together?
Avoid pairs with similar lightness but different hues for text, such as red on green or blue on purple: they vibrate visually and are hard to read, especially for the roughly 1 in 12 men with red-green color vision deficiency (NHS figure). Check pairs with the color blindness simulator.
How many colors should a color combination have?
Three to five is typical for a website or brand: a dominant neutral, a secondary color and one accent, plus a dark and a light for text and backgrounds.