Navy Blue Color Wheel & UI Harmonies
Drag the handle around the wheel or use sliders below
Generated Harmonies (2 Colors)
Primary Base
#1E3B8Aoklch(0.381 0.136 265.2)
Complementary
#8A6D1Eoklch(0.549 0.100 87.5)
Live UI Component Preview
Apex Analytics
Team Dashboard
$84,290
14,820
Optimal
Interactive Button & State Styles
Verify clickability, state contrasts, and visual weight across primary and secondary controls.
WCAG 2.1 Contrast Matrix
Evaluates minimum contrast ratios for regular body text (4.5:1 AA, 7:1 AAA) and large text (3:1).
| Color Role | Hex | On Pure White (#FFF) | On Dark Obsidian (#0B0F19) | Recommended Usage |
|---|---|---|---|---|
Primary Base | #1E3B8A | 10.25:1(AAA) | 1.87:1(Fail) | Best on Light UI / Backgrounds |
Complementary | #8A6D1E | 4.90:1(AA) | 3.91:1(AA (large text)) | Best on Light UI / Backgrounds |
50–950 Tailwind Shade Ramp
Click any swatch to copy its HEX value. Formatted for Tailwind CSS v4 / v3 color configurations.
Ready-to-Use Code Snippets
// tailwind.config.js / CSS @theme
module.exports = {
theme: {
extend: {
colors: {
primary: {
50: '#F5F6F9',
100: '#E9EBF2',
200: '#BCCAF0',
300: '#92A9E7',
400: '#6081DC',
500: '#1E3B8A',
600: '#274BB0',
700: '#1F3D8E',
800: '#172D69',
900: '#0B1C4B',
950: '#07112C',
},
secondary: '#8A6D1E',
accent: '#10B981',
}
}
}
};How to Use Navy Blue in Digital Product Design
Navy Blue (224° hue) is the bedrock of corporate credibility, banking, and data analytics. It carries the weight and stability of black while retaining the warmth and clarity of the blue spectrum. It prevents executive interfaces from feeling overly stark while anchoring key hierarchies.
✓Recommended UI Applications
Use as the dominant structural color: sidebar navigation, header bars, modal overlays, and deep brand anchors. Pair with vibrant cyan or electric gold for dynamic interaction states.
⚠Accessibility & Contrast Guidelines
Navy 900 (#1E3A8A) delivers a flawless 12.8:1 contrast ratio against pure white, meeting WCAG AAA requirements easily. White text and vibrant neon accents are exceptionally readable on navy backdrops.
Curated UI Pairings for Navy Blue
Expertly tested color coordinates that harmonize with Navy Blue without visual clashes.
Electric Cyan Accent
#38BDF8Luminous contrast pop for links, icons, and progress bars.
Warm Amber Spark
#F59E0BComplementary focal point for conversion buttons and badges.
Cool Cloud Surface
#F8FAFCCrisp neutral canvas allowing navy structural components to command attention.
Navy Blue Design System Token Specifications
Exact mathematical coordinates for design tokens, CSS variables, and modern style declarations.
#1E3A8A
rgb(30, 58, 138)
hsl(224°, 64%, 33%)
oklch(0.379 0.138 265.5)
Frequently Asked Questions About Navy Blue
What primary role should Navy Blue take in a digital interface?
Navy Blue (224° hue) is the bedrock of corporate credibility, banking, and data analytics. It carries the weight and stability of black while retaining the warmth and clarity of the blue spectrum. It prevents executive interfaces from feeling overly stark while anchoring key hierarchies. In software applications, it functions best as an intentional accent, call-to-action anchor, or branded container highlight rather than an overwhelming full-bleed background.
How do I maintain WCAG AA accessibility when using Navy Blue?
Navy 900 (#1E3A8A) delivers a flawless 12.8:1 contrast ratio against pure white, meeting WCAG AAA requirements easily. White text and vibrant neon accents are exceptionally readable on navy backdrops. Always verify text and background luminance ratios using our real-time WCAG matrix table above before shipping to production.
How can I import Navy Blue into Tailwind CSS?
Use our Code Export Center above to copy the ready-made 11-step shade scale (50 to 950) directly into your Tailwind v4 @theme or v3 tailwind.config.js file.
Related Design Color Wheels
Aesthetic
#9D8DF1Dreamy, Pinterest-inspired palette featuring Y2K pastels, cottagecore greens, and warm 70s vintage tones.
Soft Autumn
#B86B53Muted, warm earth-toned palette from 12-season color analysis — featuring terracotta, olive, and warm taupe.
Deep Winter
#1E3A8AHigh-contrast, jewel-toned palette from 12-season analysis — featuring obsidian navy, icy cobalt, and cool ruby.
Soft Summer
#9B8EB9Cool, desaturated smoky pastel palette — featuring dusty lavender, slate denim, and sea mist sage.