Branding Color Palette

A distinctive teal identity color, a neutral base and a gold accent — enough range for a full brand system without diluting the signature hue. Anchors: #0F766E, #F9FAFB, #D4AF37.

brandingidentitypremium
#0F766E
#F9FAFB
#D4AF37
#9CC0BB
#A1A1A5
#0f766e #f9fafb #d4af37 #9cc0bb #a1a1a5
#0F766E #F9FAFB #D4AF37 #9CC0BB #A1A1A5

Semantic roles

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

background#F9FAFB
surface#9CC0BB
text#0F766E
text-muted#A1A1A5
primary#D4AF37
secondary#9CC0BB
accent#A1A1A5

CSS variables 

:root {
  --background: #f9fafb;
  --surface: #9cc0bb;
  --text: #0f766e;
  --text-muted: #a1a1a5;
  --primary: #d4af37;
  --secondary: #9cc0bb;
  --accent: #a1a1a5;
}
Preview in UIs →

Accessibility matrix

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

Text \ BG#0F766E#F9FAFB#D4AF37#9CC0BB#A1A1A5
#0F766E
1.0
5.2
2.6
2.8
2.1
#F9FAFB
5.2
1.0
2.0
1.9
2.5
#D4AF37
2.6
2.0
1.0
1.1
1.2
#9CC0BB
2.8
1.9
1.1
1.0
1.3
#A1A1A5
2.1
2.5
1.2
1.3
1.0

Under deuteranopia

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

Colors in this palette

#0F766E
rgb(15, 118, 110)
#F9FAFB
rgb(249, 250, 251)
#D4AF37
rgb(212, 175, 55)
#9CC0BB
rgb(156, 192, 187)
#A1A1A5
rgb(161, 161, 165)

Similar palettes

Logo Color Palette
Summer Color Palette
App UI Color Palette

FAQ

How do I use the branding color palette in CSS?

Copy the CSS variables below into :root and use var(--primary), var(--background) etc. Full palette: #0F766E, #F9FAFB, #D4AF37, #9CC0BB, #A1A1A5.

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.