Logo Color Palette

Black plus one strong signature color. Logos read at small sizes; this set stays legible in one-color and two-color reproduction. Anchors: #111111, #E11D48.

logobrandingbold
#111111
#E11D48
#898989
#962638
#898989
#111111 #e11d48 #898989 #962638 #898989
#111111 #E11D48 #898989 #962638 #898989

Semantic roles

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

background#898989
surface#898989
text#111111
text-muted#962638
primary#E11D48
secondary#962638
accent#962638

CSS variables 

:root {
  --background: #898989;
  --surface: #898989;
  --text: #111111;
  --text-muted: #962638;
  --primary: #e11d48;
  --secondary: #962638;
  --accent: #962638;
}
Preview in UIs →

Accessibility matrix

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

Text \ BG#111111#E11D48#898989#962638#898989
#111111
1.0
4.0
5.4
2.4
5.4
#E11D48
4.0
1.0
1.3
1.7
1.3
#898989
5.4
1.3
1.0
2.3
1.0
#962638
2.4
1.7
2.3
1.0
2.3
#898989
5.4
1.3
1.0
2.3
1.0

Under deuteranopia

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

Colors in this palette

#111111
rgb(17, 17, 17)
#E11D48
rgb(225, 29, 72)
#898989
rgb(137, 137, 137)
#962638
rgb(150, 38, 56)
#898989
rgb(137, 137, 137)

Similar palettes

Vibrant Color Palette
Branding Color Palette
New Year Color Palette

FAQ

How do I use the logo color palette in CSS?

Copy the CSS variables below into :root and use var(--primary), var(--background) etc. Full palette: #111111, #E11D48, #898989, #962638, #898989.

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.