Triadic Color Palette

Three hues 120° apart — balanced, colorful and stable, a classic for playful brands. Palette anchors: #E63946, #2A9D8F, #264653.

triadicvibrant
#E63946
#2A9D8F
#264653
#F5F5F5
#E9C46A
#e63946 #2a9d8f #264653 #f5f5f5 #e9c46a
#E63946 #2A9D8F #264653 #F5F5F5 #E9C46A

Semantic roles

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

background#F5F5F5
surface#E9C46A
text#264653
text-muted#E63946
primary#E63946
secondary#2A9D8F
accent#E9C46A

CSS variables 

:root {
  --background: #f5f5f5;
  --surface: #e9c46a;
  --text: #264653;
  --text-muted: #e63946;
  --primary: #e63946;
  --secondary: #2a9d8f;
  --accent: #e9c46a;
}
Preview in UIs →

Accessibility matrix

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

Text \ BG#E63946#2A9D8F#264653#F5F5F5#E9C46A
#E63946
1.0
1.3
2.4
3.8
2.5
#2A9D8F
1.3
1.0
3.0
3.0
2.0
#264653
2.4
3.0
1.0
9.3
6.0
#F5F5F5
3.8
3.0
9.3
1.0
1.5
#E9C46A
2.5
2.0
6.0
1.5
1.0

Under deuteranopia

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

Colors in this palette

#E63946
rgb(230, 57, 70)
#2A9D8F
rgb(42, 157, 143)
#264653
rgb(38, 70, 83)
#F5F5F5
Whitesmoke
#E9C46A
rgb(233, 196, 106)

Similar palettes

Crimson Color Palette
Vibrant Color Palette
Orange Color Palette

FAQ

How do I use the triadic color palette in CSS?

Copy the CSS variables below into :root and use var(--primary), var(--background) etc. Full palette: #E63946, #2A9D8F, #264653, #F5F5F5, #E9C46A.

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.