60-30-10 Color Palette Hex Code Examples: 5 Ready-to-Use Palettes

Five 60-30-10 palettes with hex codes, CSS variables, and Tailwind v4 @theme blocks. Pick one, paste it, customize.

Each palette is WCAG AA compliant — the text/background pairings meet the 4.5:1 contrast ratio required for normal text.

1. Neutral SaaS

Use case: Standard light-mode SaaS dashboard or web app. Clean, professional, high readability. For dashboard-specific extensions (status colors, chart palette), see SaaS Dashboard Color Palette.

| Role | Hex | Usage | |------|-----|-------| | Dominant (60%) | #f8fafc | Page background, card surfaces | | Secondary (30%) | #1e293b | Sidebar, navigation, headers | | Accent (10%) | #3b82f6 | Buttons, links, active states |

WCAG AA: #1e293b on #f8fafc → 12.1:1 contrast. Passes.

:root {
  --color-dominant: #f8fafc;
  --color-secondary: #1e293b;
  --color-accent: #3b82f6;
}

@theme {
  --color-dominant: #f8fafc;
  --color-secondary: #1e293b;
  --color-accent: #3b82f6;
}

2. Bold SaaS

Use case: Marketing-heavy SaaS with strong CTA emphasis. White content area, near-black structure, orange for conversion actions.

| Role | Hex | Usage | |------|-----|-------| | Dominant (60%) | #ffffff | Page background, cards | | Secondary (30%) | #111827 | Navigation, headers, text | | Accent (10%) | #f97316 | Primary CTAs, pricing highlights |

WCAG AA: #111827 on #ffffff → 18.1:1 contrast. #f97316 on #111827 (dark buttons) → 5.7:1. Passes.

:root {
  --color-dominant: #ffffff;
  --color-secondary: #111827;
  --color-accent: #f97316;
}

@theme {
  --color-dominant: #ffffff;
  --color-secondary: #111827;
  --color-accent: #f97316;
}

3. Dark Mode

Use case: Developer tools, code editors, productivity apps where users prefer dark surfaces. Near-black background, dark gray panels, light blue accent for interactive elements. For the full dark mode wiring guide (contrast checks, prefers-color-scheme, Tailwind dark:), see 60-30-10 Dark Mode Color Palette.

| Role | Hex | Usage | |------|-----|-------| | Dominant (60%) | #121212 | Page background, main surfaces | | Secondary (30%) | #2d2d2d | Cards, sidebar, panels | | Accent (10%) | #60a5fa | Buttons, links, focus indicators |

WCAG AA: #e2e8f0 (body text) on #121212 → 14.5:1. #60a5fa on #121212 → 7.3:1. Passes.

Note: your body text (--color-text) should be a near-white like #e2e8f0 or #f1f5f9 on this background — not the secondary panel color.

:root {
  --color-dominant: #121212;
  --color-secondary: #2d2d2d;
  --color-accent: #60a5fa;
}

@theme {
  --color-dominant: #121212;
  --color-secondary: #2d2d2d;
  --color-accent: #60a5fa;
}

4. Portfolio / Minimal

Use case: Developer portfolio, documentation site, or content-first app. Soft white background, near-black text, emerald accent for standout moments. For 3 full portfolio palette directions with persona guidance, see Developer Portfolio Color Palette.

| Role | Hex | Usage | |------|-----|-------| | Dominant (60%) | #fafafa | Page background, card surfaces | | Secondary (30%) | #18181b | Body text, navigation, headings | | Accent (10%) | #10b981 | CTA buttons, links, active nav |

WCAG AA: #18181b on #fafafa → 18.5:1 contrast. #10b981 on #fafafa → 4.6:1 (just above threshold). Passes.

:root {
  --color-dominant: #fafafa;
  --color-secondary: #18181b;
  --color-accent: #10b981;
}

@theme {
  --color-dominant: #fafafa;
  --color-secondary: #18181b;
  --color-accent: #10b981;
}

5. Landing Page / Warm

Use case: Product landing page with warm, differentiated feel. Cream background sets it apart from pure-white competitors. Navy text for authority. Coral CTA for urgency. For CTA concentration strategy and accent bleed anti-patterns, see Landing Page Color Palette.

| Role | Hex | Usage | |------|-----|-------| | Dominant (60%) | #fffbeb | Page background, sections | | Secondary (30%) | #1e3a5f | Navigation, headings, footers | | Accent (10%) | #f43f5e | CTA buttons, pricing badges |

WCAG AA: #1e3a5f on #fffbeb → 9.8:1 contrast. Passes.

:root {
  --color-dominant: #fffbeb;
  --color-secondary: #1e3a5f;
  --color-accent: #f43f5e;
}

@theme {
  --color-dominant: #fffbeb;
  --color-secondary: #1e3a5f;
  --color-accent: #f43f5e;
}

Generating your own

Want to generate your own? Enter your starting color at sixtythirtyten.co — you get CSS variables and Tailwind config for any hex value. The download includes the :root block and Tailwind v4 @theme pre-filled with your palette.

For detailed Tailwind v4 and v3 configuration syntax, see the 60-30-10 Tailwind palette guide.

For the framework-agnostic CSS variables reference, see the CSS variables color system cheat sheet.

Take one, customize the hex values, ship it.

Generate your palette at sixtythirtyten.co →

Enter one color and get a complete 60-30-10 palette with CSS variables and Tailwind config ready to drop in.