Trustworthy, analytical, stable, and action-oriented.
The palette reserves saturated colors for actions and status while a pale canvas and dark text carry the majority of financial content.
HTML Color · Curated palette
Finance Dashboard Color Palette
A finance dashboard palette with neutral surfaces, dark data text, blue actions, and explicit green and red feedback colors.
#F8FAFC#E2E8F0#0F172A#1D4ED8#16A34A#DC2626- Banking dashboards
- Payment products
- Portfolio summaries
- Transaction management
- Status-heavy charts that use red and green without labels or patterns
- Decorative lifestyle branding that needs a softer emotional tone
Color values
HEX, RGB, OKLCH, CPS, and CMYK planning values.
CMYK values are generic planning approximations. Final print output requires a target ICC profile and physical proof.
| Color | HEX | RGB | OKLCH | CMYK approximation | Nearest CPS |
|---|---|---|---|---|---|
#F8FAFC | 248, 250, 252 | oklch(98.4% 0.003 248) | 2% / 1% / 0% / 1% | CPS 34050NΔE00 0.64 | |
#E2E8F0 | 226, 232, 240 | oklch(92.9% 0.013 256) | 6% / 3% / 0% / 6% | CPS 36100NΔE00 1.68 | |
#0F172A | 15, 23, 42 | oklch(20.8% 0.04 266) | 64% / 45% / 0% / 84% | CPS 22950SΔE00 2.92 | |
#1D4ED8 | 29, 78, 216 | oklch(48.8% 0.217 264) | 87% / 64% / 0% / 15% | CPS 24600VΔE00 2.13 | |
#16A34A | 22, 163, 74 | oklch(62.7% 0.17 149) | 87% / 0% / 55% / 36% | CPS 15500EΔE00 2.12 | |
#DC2626 | 220, 38, 38 | oklch(57.7% 0.215 27) | 0% / 83% / 83% / 14% | CPS 01500VΔE00 2.91 |
Semantic role mapping
Give every color a stable job.
This role map is a practical starting point. Validate it against the real components, text sizes, and interaction states in your product.
Dashboard background
Table lines and inactive controls
Balances, labels, body content
Links and key controls
Confirmed transactions with icon and label
Failed actions with icon and message
Context previews
Review the palette in light, dark, and mobile UI.
These previews reveal role assumptions that are invisible in a simple swatch strip.
Finance DashboardOverviewProjects
Primary metric24,680
Latest activity
Role-based color preview
ReadyDark contextDashboardSettings
Selected stateColor system
Focus and status
Check the real relationships
ActiveFinance Dashboard•••
Mobile previewBuild with roles
Test text, controls, and states before export.
Important foreground and background pairs.
AaFinancial data text#0F172A on #F8FAFC17.06:1AA normal text
AaPrimary action label#F8FAFC on #1D4ED86.41:1AA normal text
AaSuccess badge label#F8FAFC on #16A34A3.15:1Large text / UI review
AaError badge label#F8FAFC on #DC26264.62:1AA normal text
Accessibility notes
- Green and red states must include text or icons because color alone is not sufficient.
- Muted borders should remain visible at the intended size.
- Data visualizations need patterns, direct labels, or line styles in addition to palette colors.
Color-vision note
Red–green state collisions are a primary risk. Keep their labels, icons, and positions distinct under protan and deutan simulations.
Print note
For printed statements, profile and proof the blue, green, and red separately; generic CMYK values are planning approximations.
Related palettes
Fintech Signal Color Palette
SaaS Interface Color Palette
Modern Tech Color Palette