Two-color combinations
Two colors are the simplest palette: one to lead and one to support. Here are 24 two-color combinations with their hex codes and the contrast between them, so you can see which pairs can carry text (13 of the 24 can) and which are better as blocks of color.
24 two-color combinations
- Navy and GoldLuxury, finance and formal events.
- Black and WhiteTimeless and maximally readable.
- Coral and TealFresh and energetic, near opposites.
- Blush and CharcoalSoft but modern.
- Mustard and SlateWarm accent on a cool neutral.
- Forest green and CreamNatural, calm and classic.
- Terracotta and SageEarthy and relaxed.
- Royal blue and OrangeComplementary and sporty.
- Burgundy and PinkRomantic, one hue in two depths.
- Lavender and MintPastel and gentle.
- Red and Off-whiteBold and confident.
- Purple and YellowComplementary and playful.
- Turquoise and SandBeach and travel.
- Olive and RustAutumnal and grounded.
- Peach and NavyWarm light color, cool dark one.
- Emerald and IvoryRich and elegant.
- Charcoal and LimeTechy, with a sharp highlight.
- Baby blue and ChocolateSoft and cozy.
- Hot pink and OrangeLoud, warm neighbors.
- Maroon and BeigeWarm and refined.
- Sky blue and Sunny yellowCheerful and bright.
- Dark teal and BlushMoody with a soft lift.
- Gray and YellowCalm neutral, bright accent.
- Black and Metallic goldGlamorous and high contrast.
Which pairs work for text?
| Pair | First color | Second color | Contrast | Text in one on the other |
|---|---|---|---|---|
| Navy and Gold | Navy #1B2A49 | Gold #D4A017 | 6.0:1 | Body text (AA) |
| Black and White | Black #111111 | White #FFFFFF | 18.9:1 | Any text (AAA) |
| Coral and Teal | Coral #FF6F61 | Teal #00797A | 1.9:1 | Not for text |
| Blush and Charcoal | Blush #F4C2C2 | Charcoal #36454F | 6.3:1 | Body text (AA) |
| Mustard and Slate | Mustard #E1AD01 | Slate #4F5D75 | 3.2:1 | Large text only |
| Forest green and Cream | Forest green #1E4D2B | Cream #F5EEDC | 8.4:1 | Any text (AAA) |
| Terracotta and Sage | Terracotta #C8553D | Sage #A3B18A | 1.9:1 | Not for text |
| Royal blue and Orange | Royal blue #2851A3 | Orange #F28C28 | 3.1:1 | Large text only |
| Burgundy and Pink | Burgundy #800020 | Pink #F7CAD0 | 7.4:1 | Any text (AAA) |
| Lavender and Mint | Lavender #B8A9D9 | Mint #BDE7C9 | 1.6:1 | Not for text |
| Red and Off-white | Red #C8102E | Off-white #F7F3EA | 5.3:1 | Body text (AA) |
| Purple and Yellow | Purple #5B2A86 | Yellow #F6C945 | 6.3:1 | Body text (AA) |
| Turquoise and Sand | Turquoise #30B5B2 | Sand #E9D8B4 | 1.8:1 | Not for text |
| Olive and Rust | Olive #6B7B3A | Rust #B7472A | 1.1:1 | Not for text |
| Peach and Navy | Peach #FFCBA4 | Navy #1F3A5F | 7.8:1 | Any text (AAA) |
| Emerald and Ivory | Emerald #046A38 | Ivory #FFFFF0 | 6.7:1 | Body text (AA) |
| Charcoal and Lime | Charcoal #333F48 | Lime #B5D33D | 6.3:1 | Body text (AA) |
| Baby blue and Chocolate | Baby blue #A7C7E7 | Chocolate #6F4E37 | 4.2:1 | Large text only |
| Hot pink and Orange | Hot pink #FF1D8E | Orange #FF8C42 | 1.6:1 | Not for text |
| Maroon and Beige | Maroon #6D1A36 | Beige #E8DCCA | 8.4:1 | Any text (AAA) |
| Sky blue and Sunny yellow | Sky blue #87CEEB | Sunny yellow #FFE45E | 1.4:1 | Not for text |
| Dark teal and Blush | Dark teal #0F5257 | Blush #F2C4C4 | 5.7:1 | Body text (AA) |
| Gray and Yellow | Gray #8E9AAF | Yellow #F5D547 | 2.0:1 | Not for text |
| Black and Metallic gold | Black #111111 | Metallic gold #D4AF37 | 9.0:1 | Any text (AAA) |
Low-contrast pairs, such as lavender and mint, are still good combinations; use them as large areas of color, with a dark neutral for text. Test any pair in the contrast checker.
How to pick two colors that go together
- Pair a light color with a dark one. Contrast in lightness matters more than hue: navy and gold work because one is dark and one is bright.
- Use opposites for energy. Colors across the color wheel from each other, such as blue and orange or purple and yellow, are complementary and look vivid together.
- Use one hue in two depths for calm. Burgundy and pink, or navy and sky blue, are monochromatic pairs.
- Let one color dominate. In most designs one color covers far more area; the second is the accent.
Have one color already? Look it up in colors that go with for its best partners, or press the spacebar in the palette generator with your color locked.
Frequently asked questions
What two colors go best together?
Pairs with strong lightness contrast are the most versatile: black and white, navy and gold, forest green and cream. For a vivid look, choose complementary colors such as blue and orange.
What are complementary two-color combinations?
Colors opposite each other on the color wheel: red and green, blue and orange, purple and yellow. Royal blue and orange, and purple and yellow, are both on this page.
Which two-color combinations are readable?
Pairs with a contrast ratio of at least 4.5:1, such as navy and gold or black and white. 13 of the 24 pairs on this page pass that for body text.
What is a good two-color combination for a logo?
A dark color and a bright one, such as navy and gold or charcoal and lime, so the logo works at small sizes and on both light and dark backgrounds.