Blue Color Guide
Blue is the foundational anchor of modern digital interfaces. Spanning from deep oceanic navies to electric cobalt and airy sky tints, blue communicates stability, competence, and calm authority across both consumer and enterprise applications.
Color Psychology & Emotional Associations
Psychologically, blue is the world's most universally trusted color. It lowers heart rate and conveys dependable competence, which explains why over 70% of leading financial institutions, healthcare providers, and cloud enterprise platforms choose blue as their primary brand anchor.
Modern Digital Product & UI Context
In digital product design, blue functions as the default semantic color for interactive elements (links, active tabs, and primary action buttons). Because it is rarely associated with natural alarms (unlike red or amber), users interact with blue controls with minimal hesitation.
UI Architecture & Role Allocation for Blue
Standard design-system implementation rules for applying blue shades across web & mobile interfaces.
Primary Action Button
Vibrant royal blue commanding visual hierarchy without aggressive urgency.
Active Tab / Focus Ring
High-visibility cobalt indicator for keyboard accessibility and active navigation states.
Subtle Surface Tint
Lightest icy tint used for alert containers, table highlights, and hover backdrops.
Dark Canvas / Navbar
Midnight navy delivering deep executive elegance for high-contrast dark mode interfaces.
Tonal Scale (Tints & Shades)
Evenly stepped luminances from subtle 50/100 tints up to deep 900 shadows for design systems.
Applying the 60-30-10 Rule With Blue
Proportional distribution framework to achieve effortless visual hierarchy.
Light Tint / Dark Canvas
Use step 50 (#EFF6FF) in light mode or step 900 (#1E3A8A) in dark mode to form the background canvas.
Container Cards & Text
Allocate mid-tone shades and muted slate neutrals to structural cards, table headers, and typography to maintain depth without clutter.
Anchor Accent (#2563EB)
Strictly reserve the primary anchor (#2563EB) for primary CTA buttons, active state highlights, and conversion targets.
Harmonious Color Pairings for Blue
Scientifically balanced relationships calculated across the 360° color wheel.
Vibrant Amber (#F59E0B)
Direct 180° color wheel complement; creates maximum click-through contrast for conversion buttons.
Deep Cyan (#06B6D4)
Adjacent 30° hue; adds atmospheric depth and fresh fluidity to tech dashboards.
Cool Slate (#64748B)
Prevents color fatigue by balancing vibrant blue accents against muted structural borders.
Accessibility & WCAG 2.2 Contrast Performance
Primary #2563EB achieves a 4.56:1 contrast ratio against pure white, successfully passing WCAG AA for standard text. For AAA strict compliance, step down to #1D4ED8 (5.9:1).
Against dark slate (#0F172A), use lighter tints between #60A5FA and #93C5FD to achieve ratios above 7:1.
Accessibility Recommendation: Always pair blue text links with underlines in body copy so that color-blind users (specifically tritanopia) can instantly identify hyperlinks.
CSS & Tailwind Design Tokens for Blue
Ready-to-paste variables and configuration theme objects.
:root {
--color-blue-anchor: #2563EB;
--color-blue-rgb: 37, 99, 235;
--color-blue-hsl: 221°, 83%, 53%;
}module.exports = {
theme: {
extend: {
colors: {
'blue': {
DEFAULT: '#2563EB',
'50': '#EFF6FF',
'100': '#DBEAFE',
'200': '#BFDBFE',
'400': '#60A5FA',
'500': '#3B82F6',
'600': '#2563EB',
'700': '#1D4ED8',
'800': '#1E40AF',
'900': '#1E3A8A',
}
}
}
}
};Curated Palettes Featuring Blue
Hand-crafted production-grade palettes featuring blue tones.
Named Colors in the Blue Spectrum
Frequently Asked Questions About Blue
In-depth answers to common questions about using blue in UI design, branding, and color harmony.