A SaaS dashboard needs more than three colors. The 60-30-10 split gives you the foundation — but status indicators, charts, and data tables need their own roles.
If you wire up only a dominant, secondary, and accent and ship it, you'll quickly find yourself making exceptions: a red for errors here, a green for success there, a set of chart bars that are all the same blue because you didn't plan ahead. Those ad-hoc additions don't integrate — they fight each other.
This walkthrough shows how to extend a 60-30-10 base palette into a dashboard-ready color system.
Generate your base palette at sixtythirtyten.co →
The base palette
Start with the 60-30-10 split. For a SaaS dashboard, the most common configuration is:
- Dominant (60%):
#f8fafc— light content area, card backgrounds, form fields - Secondary (30%):
#1e293b— sidebar, top navigation, table header rows - Accent (10%):
#3b82f6— primary buttons, active nav item, selected states, links
:root {
/* 60-30-10 base */
--color-dominant: #f8fafc;
--color-secondary: #1e293b;
--color-accent: #3b82f6;
}
This gets you a functional three-zone layout. But dashboards surface data — and data surfaces states.
Extended roles: status colors
Status colors communicate outcomes: something succeeded, something needs attention, something failed. They live outside the 60-30-10 hierarchy because they carry semantic meaning that overrides visual hierarchy.
Add these as separate role variables, not overrides of your accent:
:root {
/* 60-30-10 base */
--color-dominant: #f8fafc;
--color-secondary: #1e293b;
--color-accent: #3b82f6;
/* Status extensions */
--color-status-success: #22c55e;
--color-status-warning: #eab308;
--color-status-error: #ef4444;
/* Chart palette (accessible) */
--color-chart-1: #3b82f6;
--color-chart-2: #8b5cf6;
--color-chart-3: #06b6d4;
--color-chart-4: #f97316;
}
Keep status colors as pure role definitions. Don't repurpose them for decoration — a green border around a testimonial card will read as "success" to users who have been trained by your badge system.
Tailwind config mapping
Wire these variables into your Tailwind config so they're available as utilities:
Tailwind v4 (globals.css):
@theme {
--color-dominant: #f8fafc;
--color-secondary: #1e293b;
--color-accent: #3b82f6;
--color-status-success: #22c55e;
--color-status-warning: #eab308;
--color-status-error: #ef4444;
--color-chart-1: #3b82f6;
--color-chart-2: #8b5cf6;
--color-chart-3: #06b6d4;
--color-chart-4: #f97316;
}
Tailwind v3 (tailwind.config.js):
module.exports = {
theme: {
extend: {
colors: {
dominant: "var(--color-dominant)",
secondary: "var(--color-secondary)",
accent: "var(--color-accent)",
status: {
success: "var(--color-status-success)",
warning: "var(--color-status-warning)",
error: "var(--color-status-error)",
},
chart: {
1: "var(--color-chart-1)",
2: "var(--color-chart-2)",
3: "var(--color-chart-3)",
4: "var(--color-chart-4)",
},
},
},
},
};
With this setup, bg-status-success and text-chart-2 are valid Tailwind classes backed by your CSS variables.
Sidebar contrast: dark backgrounds need lighter text
Your secondary color (#1e293b) is dark. Any text placed directly on it must hit WCAG AA contrast: 4.5:1 for normal text, 3:1 for large text.
Check the contrast ratio of white (#ffffff) on #1e293b using the WebAIM contrast checker or Chrome DevTools — WCAG AA requires 4.5:1 for normal text:
- White on
#1e293b: approximately 13.3:1 — passes AA and AAA at all sizes.
If you're using a softer off-white for body text in the sidebar (e.g., #e2e8f0):
#e2e8f0on#1e293b: approximately 9.3:1 — still passes comfortably.
Avoid pairing medium grays on the dark sidebar. #94a3b8 (Tailwind slate-400) on #1e293b drops to around 3.1:1, which only passes for large text.
Use the sidebar text colors explicitly:
.sidebar-nav-item {
color: #e2e8f0; /* ~9.3:1 on #1e293b */
}
.sidebar-nav-item.active {
color: #ffffff;
background-color: var(--color-accent); /* #3b82f6 */
}
Chart colors: accessibility beyond contrast
Chart colors are not just a contrast problem — they're a distinguishability problem. Two bars in a bar chart might both pass WCAG contrast on white backgrounds, but if they're too perceptually similar, colorblind users can't tell them apart.
The four chart colors above (#3b82f6, #8b5cf6, #06b6d4, #f97316) were chosen to be distinguishable across the three most common forms of color blindness (deuteranopia, protanopia, tritanopia) by varying hue and luminosity, not just hue alone.
But contrast ratio alone doesn't guarantee chart accessibility. Best practices:
- Pair color encoding with shape encoding (use different bar patterns or line dashes when printing matters)
- Include a data label on hover, not just color
- Don't rely on red/green distinction alone for success/error states in charts — add an icon or text label
Putting it together: a dashboard with real roles
Here's what the full variable set looks like when applied across common dashboard surfaces:
| Surface | CSS Variable |
|---------|--------------|
| Page background | --color-dominant |
| Sidebar | --color-secondary |
| Primary button | --color-accent |
| Active nav item | --color-accent |
| Success badge | --color-status-success |
| Warning alert | --color-status-warning |
| Error banner | --color-status-error |
| Revenue chart line | --color-chart-1 |
| Users chart line | --color-chart-2 |
| Sessions chart line | --color-chart-3 |
| Conversion chart bar | --color-chart-4 |
Once you have these roles defined as CSS variables, you're not making color decisions in components — you're picking roles. The palette change is a single edit to the variable values.
What to do next
Generate your 60-30-10 base palette at sixtythirtyten.co, then extend it with the status and chart roles above.
Once you have the palette, the next step is structuring it as a proper token system: primitives → semantic tokens → component tokens. That's covered in SaaS App Color Token System: Primitives to Component Tokens.
For dark mode extensions to this palette (dark sidebar, accent adjustment, prefers-color-scheme wiring), see 60-30-10 Dark Mode Color Palette.
For the framework-agnostic CSS variables reference, see CSS Variables Color System Cheat Sheet.
For the foundational rule that underlies all of this, see The 60-30-10 Rule: A Developer's Guide to UI Color Balance.
Generate your dashboard's base palette, then layer in the status and chart extensions above.