Blue is the most common dominant or secondary color in SaaS and web apps. It reads as trustworthy to most users across cultures, which is why it dominates enterprise software, fintech, and healthcare — industries where trust is a prerequisite for conversion.
Three shades — navy, sky blue, and midnight — cover the most common UI contexts: professional B2B tools, consumer-friendly products, and dark-mode-adjacent interfaces. Each palette below follows the 60-30-10 rule: 60% dominant for backgrounds and content areas, 30% secondary for navigation and structure, and 10% accent for buttons, links, and active states. All three palettes are WCAG AA compliant.
Not familiar with the rule? Start here.
Prefer to start from a custom color? Generate your palette at sixtythirtyten.co →
1. Navy Blue Palette
Best for: B2B SaaS dashboards, enterprise tools, fintech, healthcare portals
| Role | Hex | Tailwind equivalent | Usage |
|------|-----|---------------------|-------|
| Dominant (60%) | #f0f4f8 | slate-100 | Page background, card surfaces |
| Secondary (30%) | #1e3a5f | custom | Sidebar, navigation, headers |
| Accent (10%) | #2563eb | blue-600 | Buttons, links, active states |
WCAG AA: #1e3a5f on #f0f4f8 passes at approximately 10:1 contrast. #2563eb on #f0f4f8 passes at approximately 5.1:1 — meets AA for normal text.
:root {
--color-dominant: #f0f4f8;
--color-secondary: #1e3a5f;
--color-accent: #2563eb;
}
/* Tailwind v4 */
@theme {
--color-dominant: #f0f4f8;
--color-secondary: #1e3a5f;
--color-accent: #2563eb;
}
The navy palette is the default choice for B2B products where authority and trust matter more than warmth. The deep #1e3a5f secondary makes navigation feel grounded and professional. The blue-600 accent is saturated enough to stand out against the light background without reading as playful.
A few things to note when implementing this palette: body text over the #f0f4f8 dominant should be #1e293b or similar near-black — the secondary color itself is for structural areas like nav and sidebar, not inline text. For the accent, reserve #2563eb for primary interactive actions only. If you place it on section headings or decorative elements, it loses its signal.
Generate this palette pre-loaded: Navy 60-30-10 →
2. Sky Blue Palette
Best for: Consumer apps, productivity tools, education platforms, lighter SaaS UIs
| Role | Hex | Tailwind equivalent | Usage |
|------|-----|---------------------|-------|
| Dominant (60%) | #f8fafc | slate-50 | Page background, content areas |
| Secondary (30%) | #0369a1 | sky-700 | Navigation, section headers, sidebars |
| Accent (10%) | #38bdf8 | sky-400 | Buttons, badges, interactive states |
WCAG AA: #0369a1 on #f8fafc passes at approximately 6.9:1 contrast. Note: #38bdf8 as an accent is used for interactive states against the #0369a1 secondary or on #f8fafc with dark text on top.
:root {
--color-dominant: #f8fafc;
--color-secondary: #0369a1;
--color-accent: #38bdf8;
}
/* Tailwind v4 */
@theme {
--color-dominant: #f8fafc;
--color-secondary: #0369a1;
--color-accent: #38bdf8;
}
The sky palette reads as lighter and more approachable than navy. The sky-700 secondary is still authoritative but has more warmth. The sky-400 accent is bright and energetic — well suited to products where engagement and delight matter alongside clarity.
Generate this palette pre-loaded: Sky Blue 60-30-10 →
3. Midnight Blue Palette
Best for: Dark-mode UIs, developer tools, code editors, analytics dashboards, security products
| Role | Hex | Tailwind equivalent | Usage |
|------|-----|---------------------|-------|
| Dominant (60%) | #0f172a | slate-900 | Page background, dark card surfaces |
| Secondary (30%) | #1e40af | blue-800 | Sidebar panels, section backgrounds |
| Accent (10%) | #60a5fa | blue-400 | Buttons, links, active states |
WCAG AA: #60a5fa on #0f172a passes at approximately 7.2:1 contrast. White text (#ffffff) on #1e40af passes at approximately 5.9:1 for the secondary panel.
The accent shifts from blue-600 to blue-400 compared to the navy palette. On dark surfaces, fully saturated blues can appear neon at high contrast. blue-400 maintains legibility and visual clarity without the harshness. This is the same principle behind the Phase 09 series color decisions — lighter accent on dark backgrounds.
For the full dark mode setup including prefers-color-scheme and Tailwind dark: utilities, see 60-30-10 Dark Mode Color Palette.
:root {
--color-dominant: #0f172a;
--color-secondary: #1e40af;
--color-accent: #60a5fa;
}
/* Tailwind v4 */
@theme {
--color-dominant: #0f172a;
--color-secondary: #1e40af;
--color-accent: #60a5fa;
}
Generate this palette pre-loaded: Midnight Blue 60-30-10 →
Which blue palette should you use?
Choose Navy for B2B, enterprise, and regulated industries where trust signals matter — finance, healthcare, professional services. Choose Sky for consumer-facing products, education, and productivity tools where approachability is part of the brand. Choose Midnight if your product is developer-facing, heavily data-driven, or needs a dark mode as a primary experience rather than an optional toggle.
When in doubt, start with Navy — it has the widest acceptance across industries and the safest contrast margins.
For more non-blue starting points, see 60-30-10 hex color palette examples. For the complete Tailwind v4 @theme syntax reference, see 60-30-10 Tailwind Color Palette.
Generate your palette at sixtythirtyten.co →
Enter any blue hex value and get a complete 60-30-10 palette with CSS variables and Tailwind config. The download includes the :root block and @theme pre-filled with your three-color split.