Charcoal#1E3A5F
Steel Blue#2E6DA4
Cornflower Blue#4A9FD4
Sky Blue#7BBDE8
Light Blue#B8D8F0
Color Palette
#1E3A5F · #2E6DA4 · #4A9FD4 · #7BBDE8 · #B8D8F0
analogous0 likes
Share
Export for Developers
:root {
--color-1: #1E3A5F;
--color-1-rgb: 30, 58, 95;
--color-1-hsl: 214, 52%, 25%;
--color-2: #2E6DA4;
--color-2-rgb: 46, 109, 164;
--color-2-hsl: 208, 56%, 41%;
--color-3: #4A9FD4;
--color-3-rgb: 74, 159, 212;
--color-3-hsl: 203, 62%, 56%;
--color-4: #7BBDE8;
--color-4-rgb: 123, 189, 232;
--color-4-hsl: 204, 70%, 70%;
--color-5: #B8D8F0;
--color-5-rgb: 184, 216, 240;
--color-5-hsl: 206, 65%, 83%;
}Real World Preview
Get Started
Accessibility
WCAG Accessibility Report
Excellent#1E3A5F
On White
11.5:1AAA
On Black
1.83:1Fail
Aa
Aa
#2E6DA4
On White
5.47:1AA
On Black
3.84:1Fail
Aa
Aa
#4A9FD4
On White
2.92:1Fail
On Black
7.2:1AAA
Aa
Aa
#7BBDE8
On White
2.04:1Fail
On Black
10.29:1AAA
Aa
Aa
#B8D8F0
On White
1.49:1Fail
On Black
14.12: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
#436CA3
#6E9FC9
#A2C9E2
#D6E9F5
#EBF3F9
🌑
darker
· Reduced lightness, increased saturation
#050C14
#153856
#1E6A99
#2093DF
#5FA9E3
🌫️
muted
· Desaturated for a calm, muted look
#323E4E
#4D6A84
#6B97B3
#94B9D1
#C4D6E3
⚡
vibrant
· Boosted saturation for maximum impact
#125BBA
#0F6FC2
#28A7F6
#33ADFF
#38A6FA