Finance Color Palette

Deep navy, conservative green and restrained gold — established-institution trust signals. Anchors: #0F2A43, #0E7A5F, #C9A227.

financebankingtrust
#0F2A43
#0E7A5F
#C9A227
#8F97A5
#1D5547
#0f2a43 #0e7a5f #c9a227 #8f97a5 #1d5547
#0F2A43 #0E7A5F #C9A227 #8F97A5 #1D5547

Semantic roles

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

background#C9A227
surface#8F97A5
text#0F2A43
text-muted#1D5547
primary#0E7A5F
secondary#8F97A5
accent#1D5547

CSS variables

:root {
  --background: #c9a227;
  --surface: #8f97a5;
  --text: #0f2a43;
  --text-muted: #1d5547;
  --primary: #0e7a5f;
  --secondary: #8f97a5;
  --accent: #1d5547;
}
Preview in UIs →

Accessibility matrix

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

Text \ BG#0F2A43#0E7A5F#C9A227#8F97A5#1D5547
#0F2A43
1.0
2.8
6.1
5.0
1.7
#0E7A5F
2.8
1.0
2.2
1.8
1.6
#C9A227
6.1
2.2
1.0
1.2
3.5
#8F97A5
5.0
1.8
1.2
1.0
2.9
#1D5547
1.7
1.6
3.5
2.9
1.0

Under deuteranopia

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

Colors in this palette

Similar palettes

FAQ

How do I use the finance color palette in CSS?

Copy the CSS variables below into :root and use var(--primary), var(--background) etc. Full palette: #0F2A43, #0E7A5F, #C9A227, #8F97A5, #1D5547.

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.