Complementary Color Palette

Hues 180° apart — maximum hue contrast, ideal for hero accents and CTAs. Palette anchors: #1E5F9E, #F07B3F, #F5F5F5.

complementarybold
#1E5F9E
#F07B3F
#F5F5F5
#1B2A4A
#C9D6EA
#1e5f9e #f07b3f #f5f5f5 #1b2a4a #c9d6ea
#1E5F9E #F07B3F #F5F5F5 #1B2A4A #C9D6EA

Semantic roles

Assigned deterministically: lightest = background, darkest = text, most saturated = primary.

background#F5F5F5
surface#C9D6EA
text#1B2A4A
text-muted#1E5F9E
primary#1E5F9E
secondary#F07B3F
accent#C9D6EA

CSS variables 

:root {
  --background: #f5f5f5;
  --surface: #c9d6ea;
  --text: #1b2a4a;
  --text-muted: #1e5f9e;
  --primary: #1e5f9e;
  --secondary: #f07b3f;
  --accent: #c9d6ea;
}
Preview in UIs →

Accessibility matrix

Text color (rows) on background (columns). Green = WCAG AA pass for normal text (≥4.5:1).

Text \ BG#1E5F9E#F07B3F#F5F5F5#1B2A4A#C9D6EA
#1E5F9E
1.0
2.4
6.0
2.2
4.5
#F07B3F
2.4
1.0
2.5
5.2
1.9
#F5F5F5
6.0
2.5
1.0
13.0
1.4
#1B2A4A
2.2
5.2
13.0
1.0
9.7
#C9D6EA
4.5
1.9
1.4
9.7
1.0

Under deuteranopia

Machado et al. (2009) simulation, severity 1.0 — approximation, not a medical tool.

Colors in this palette

#1E5F9E
rgb(30, 95, 158)
#F07B3F
rgb(240, 123, 63)
#F5F5F5
Whitesmoke
#1B2A4A
Navy Blue
#C9D6EA
rgb(201, 214, 234)

Similar palettes

Minimal Color Palette
Navy Blue Color Palette
Website Color Palette

FAQ

How do I use the complementary color palette in CSS?

Copy the CSS variables below into :root and use var(--primary), var(--background) etc. Full palette: #1E5F9E, #F07B3F, #F5F5F5, #1B2A4A, #C9D6EA.

Do these colors pass accessibility checks?

See the WCAG matrix on this page: every text-on-background pairing with ratio ≥ 4.5 passes AA for normal text; ≥ 3 passes AA for large text and UI components.