The complete CSS variables setup for a 60-30-10 color system. Copy, paste, customize the hex values.
The :root block
CSS custom properties (also called CSS variables) are defined on :root so they're available to every element in the document.
:root {
--color-dominant: #f8fafc; /* 60% — backgrounds, surfaces */
--color-secondary: #1e293b; /* 30% — navigation, headers, structure */
--color-accent: #3b82f6; /* 10% — buttons, links, active states */
}
Replace the hex values with your palette. Everything else stays the same.
Usage
Background:
body {
background-color: var(--color-dominant);
}
Text and headings:
h1, h2, h3 {
color: var(--color-secondary);
}
p {
color: var(--color-secondary);
}
Buttons and links:
.btn-primary {
background-color: var(--color-accent);
color: #ffffff;
}
a {
color: var(--color-accent);
}
Navigation and sidebar:
nav, aside {
background-color: var(--color-secondary);
color: var(--color-dominant);
}
Borders:
.card {
border: 1px solid var(--color-secondary);
}
hr {
border-color: var(--color-secondary);
opacity: 0.2;
}
Dark mode override
@media (prefers-color-scheme: dark) {
:root {
--color-dominant: #0f172a;
--color-secondary: #334155;
--color-accent: #60a5fa;
}
}
Or use a class-based toggle (e.g., Next.js next-themes) with prefers-color-scheme as the system-level fallback:
.dark {
--color-dominant: #0f172a;
--color-secondary: #334155;
--color-accent: #60a5fa;
}
All components that reference var(--color-*) update automatically — no per-component changes needed.
WCAG contrast
Check 4.5:1 contrast ratio between text and background — the WCAG AA minimum for normal text. Use Chrome DevTools or WebAIM contrast checker.
The palette above (#1e293b text on #f8fafc background) passes at 12.1:1. The dark mode pair (#e2e8f0 on #0f172a) passes at 13.7:1.
Framework integration
These variables work in any framework. Reference them in component styles without configuration:
React / Vue — import your globals.css once at the root, then use in any .css, .module.css, or styled component:
.card {
background: var(--color-dominant);
border: 1px solid var(--color-secondary);
}
Tailwind — map the variables in your config for utility class access. See the Tailwind palette guide.
shadcn/ui — shadcn uses the same CSS variable pattern natively. See shadcn/ui Color System: Map 60-30-10 to CSS Variables.
Plain HTML — link your stylesheet in <head> and use var() anywhere inline styles or external CSS apply.
Generator tie-in
Generate your values at sixtythirtyten.co — the CSS output gives you this exact :root block with your generated colors, plus a dark mode override based on your palette's contrast characteristics.
For the complete dark mode setup (contrast checks, accent adjustment, Tailwind dark: integration), see 60-30-10 Dark Mode Color Palette.
For the foundational layout logic, see The 60-30-10 Rule: A Developer's Guide to UI Color Balance.
Paste it. Customize the hex values. Ship.
Generate your CSS variables at sixtythirtyten.co →
Enter one color and get a 60-30-10 palette with the :root block and dark mode override pre-written.