What Colors Go With Blue? 12 Combinations (+ Hex Codes)
What colors go with blue? Here are 12 proven blue color combinations — complementary, neutral and analogous — each with copy-ready hex codes.
Blue is the world’s most popular color — calm, trustworthy and endlessly versatile. It fits almost any design, but the partner color you choose decides whether it feels corporate, coastal, playful or luxurious. If you have been asking "what colors go with blue?", here are 12 combinations that always work, each with copy-ready hex codes.
Prefer to browse live schemes? Explore the blue color palettes on PaletteCSS, all with one-click hex copying.
The short answer
Blue pairs best with orange and coral (its complement), with white, gray and navy (clean neutrals), and with teal and green (its calm neighbors). For warmth and contrast, add gold, yellow or blush pink.
12 colors that go with blue
| Combination | Blue | Partner |
|---|---|---|
| Blue + Orange | #2563EB | #F97316 |
| Blue + Coral | #3B82F6 | #FB7185 |
| Blue + White | #2563EB | #FFFFFF |
| Blue + Gray | #1D4ED8 | #9CA3AF |
| Blue + Navy | #3B82F6 | #1E3A8A |
| Blue + Teal | #2563EB | #14B8A6 |
| Blue + Green | #2563EB | #22C55E |
| Blue + Gold | #1E40AF | #D4AF37 |
| Blue + Yellow | #2563EB | #FACC15 |
| Blue + Blush | #2563EB | #FBCFE8 |
| Blue + Cream | #1E3A8A | #FEF3C7 |
| Blue + Charcoal | #2563EB | #1F2937 |
Complementary: blue + orange
Orange sits directly opposite blue on the color wheel, making it blue’s complementary color — the highest-contrast, most energetic pairing. Use a calm blue as your base and a warm orange or coral as a punchy accent for buttons and highlights.
Neutral: blue + white, gray or navy
For a clean, professional look, anchor blue with neutrals. White keeps it airy and modern, gray makes it understated, and a deeper navy adds depth for a confident, corporate feel.
Analogous: blue + teal or green
Neighboring colors create calm, cohesive schemes. Blue flows naturally into teal and green — ideal for soothing, nature-inspired designs and smooth CSS gradients.
Warm accent: blue + gold or blush
When blue feels too cold, a touch of gold (#D4AF37) adds warmth and a premium feel, while soft blush pink keeps things gentle and contemporary.
Use it in CSS
:root {
--blue: #2563EB;
--accent: #F97316;
--ink: #0F172A;
--paper: #F8FAFC;
}
Frequently asked questions
What is the complementary color of blue?
Orange is the complementary color of blue — it sits directly opposite on the color wheel and creates the strongest contrast.
What colors go with navy blue?
Navy blue pairs beautifully with white, cream, blush pink, gold and gray. It works as a sophisticated, near-neutral base in almost any palette.
Do blue and green go together?
Yes — blue and green are analogous colors, so they blend smoothly for calm, natural schemes and gradients.
Next, see what colors go with purple, or learn the fundamentals in color theory basics.