Midnight Blue#172554
Sapphire#1D4ED8
Cornflower Blue#60A5FA
Periwinkle#BFDBFE
Alice Blue#EFF6FF
Color Palette
#172554 · #1D4ED8 · #60A5FA · #BFDBFE · #EFF6FF
monochromatic0 likes
Share
Export for Developers
:root {
--color-1: #172554;
--color-1-rgb: 23, 37, 84;
--color-1-hsl: 226, 57%, 21%;
--color-2: #1D4ED8;
--color-2-rgb: 29, 78, 216;
--color-2-hsl: 224, 76%, 48%;
--color-3: #60A5FA;
--color-3-rgb: 96, 165, 250;
--color-3-hsl: 213, 94%, 68%;
--color-4: #BFDBFE;
--color-4-rgb: 191, 219, 254;
--color-4-hsl: 213, 97%, 87%;
--color-5: #EFF6FF;
--color-5-rgb: 239, 246, 255;
--color-5-hsl: 214, 100%, 97%;
}Real World Preview
Get Started
Accessibility
WCAG Accessibility Report
Excellent#172554
On White
14.69:1AAA
On Black
1.43:1Fail
Aa
Aa
#1D4ED8
On White
6.7:1AA
On Black
3.13:1Fail
Aa
Aa
#60A5FA
On White
2.54:1Fail
On Black
8.26:1AAA
Aa
Aa
#BFDBFE
On White
1.42:1Fail
On Black
14.78:1AAA
Aa
Aa
#EFF6FF
On White
1.09:1Fail
On Black
19.3:1AAA
Aa
Aa
Contrast ratios calculated per WCAG 2.1. AA requires ≥4.5:1, AAA requires ≥7:1 for normal text.
Palette Variations
Palette Variations
Original
☀️
lighter
· Increased lightness, reduced saturation
#374E9A
#7894E3
#C7DEFA
#E7F1FD
#E7F1FE
🌑
darker
· Reduced lightness, increased saturation
#050915
#0E2C81
#016EF4
#57A2FF
#8ABDFF
🌫️
muted
· Desaturated for a calm, muted look
#272E44
#4260B3
#79A8E2
#C8DCF4
#F2F7FD
⚡
vibrant
· Boosted saturation for maximum impact
#0D37BF
#0041F5
#338FFF
#338FFF
#338BFF