Orange and Blue
Why they work: the cinematic complementary — warm subject against cool ground.
Combination sets
The classic split
Orange and Blue with a light tint of orange, a deep shade of blue and white for breathing room.
Dark mode
Both anchors survive on dark: Blue as the highlight, Orange as the accent, and two intermediate surfaces for elevation.
Soft & light
Both anchors reduced to tints for airy sections, with the full-strength colors kept for buttons and links.
60 / 30 / 10 UI set
A practical interface split: neutral ~60%, orange ~30% for structure, blue ~10% for calls to action.
Gradient bridge
The direct perceptual path from orange to blue — use for hero sections, charts and progress states.
Contrast data
| Foreground | Background | Ratio | AA | AAA |
|---|---|---|---|---|
| #FFA500 | #0000FF | 4.35:1 | ✗ | ✗ |
| #0000FF | #FFA500 | 4.35:1 | ✗ | ✗ |
| #FFA500 | #FFFFFF | 1.97:1 | ✗ | ✗ |
| #FFA500 | #000000 | 10.63:1 | ✓ | ✓ |
| #0000FF | #FFFFFF | 8.59:1 | ✓ | ✓ |
| #0000FF | #000000 | 2.44:1 | ✗ | ✗ |
| #16161D | #E426A1 | 4.36:1 | ✗ | ✗ |
Related combinations
FAQ
Do orange and blue go together?
Yes — the cinematic complementary — warm subject against cool ground. Their hues are 159° apart on the color wheel and the direct pair contrast is 4.35:1. The sets on this page show exactly how to balance them (warm + cool).
What text color works on orange and blue?
On orange use #000000 text (10.63:1); on blue use #FFFFFF (8.59:1). Both pass WCAG AA for normal text.
What are the exact color codes?
Orange: #FFA500 — OKLCH oklch(79.27% 0.171 70.7). Blue: #0000FF — OKLCH oklch(45.2% 0.313 264.1).