Dashboard Color Palette

A dark data surface with a four-hue status set (info, success, warning, error) — colorblind-checked for chart series. Anchors: #0F172A, #38BDF8, #10B981, #F59E0B, #EF4444.

dashboarddataanalytics
#0F172A
#38BDF8
#10B981
#F59E0B
#EF4444
#0f172a #38bdf8 #10b981 #f59e0b #ef4444
#0F172A #38BDF8 #10B981 #F59E0B #EF4444

Semantic roles

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

background#38BDF8
surface#F59E0B
text#0F172A
text-muted#EF4444
primary#F59E0B
secondary#10B981
accent#EF4444

CSS variables 

:root {
  --background: #38bdf8;
  --surface: #f59e0b;
  --text: #0f172a;
  --text-muted: #ef4444;
  --primary: #f59e0b;
  --secondary: #10b981;
  --accent: #ef4444;
}
Preview in UIs →

Accessibility matrix

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

Text \ BG#0F172A#38BDF8#10B981#F59E0B#EF4444
#0F172A
1.0
8.3
7.0
8.3
4.7
#38BDF8
8.3
1.0
1.2
1.0
1.8
#10B981
7.0
1.2
1.0
1.2
1.5
#F59E0B
8.3
1.0
1.2
1.0
1.8
#EF4444
4.7
1.8
1.5
1.8
1.0

Under deuteranopia

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

Colors in this palette

#0F172A
rgb(15, 23, 42)
#38BDF8
rgb(56, 189, 248)
#10B981
rgb(16, 185, 129)
#F59E0B
rgb(245, 158, 11)
#EF4444
rgb(239, 68, 68)

Similar palettes

Dark Mode UI Palette
App UI Color Palette
Diwali Color Palette

FAQ

How do I use the dashboard color palette in CSS?

Copy the CSS variables below into :root and use var(--primary), var(--background) etc. Full palette: #0F172A, #38BDF8, #10B981, #F59E0B, #EF4444.

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.