Lavender#D4F1F4
Pale Turquoise#C8E6F0
Light Blue#B0D8EC
Sky Blue#75C0E0
Steel Blue#3D9AC9
Color Palette
#D4F1F4 · #C8E6F0 · #B0D8EC · #75C0E0 · #3D9AC9
monochromatic0 likes
Share
Export for Developers
:root {
--color-1: #D4F1F4;
--color-1-rgb: 212, 241, 244;
--color-1-hsl: 186, 59%, 89%;
--color-2: #C8E6F0;
--color-2-rgb: 200, 230, 240;
--color-2-hsl: 195, 57%, 86%;
--color-3: #B0D8EC;
--color-3-rgb: 176, 216, 236;
--color-3-hsl: 200, 61%, 81%;
--color-4: #75C0E0;
--color-4-rgb: 117, 192, 224;
--color-4-hsl: 198, 63%, 67%;
--color-5: #3D9AC9;
--color-5-rgb: 61, 154, 201;
--color-5-hsl: 200, 56%, 51%;
}Real World Preview
Get Started
Accessibility
WCAG Accessibility Report
Excellent#D4F1F4
On White
1.19:1Fail
On Black
17.69:1AAA
Aa
Aa
#C8E6F0
On White
1.31:1Fail
On Black
16.03:1AAA
Aa
Aa
#B0D8EC
On White
1.51:1Fail
On Black
13.88:1AAA
Aa
Aa
#75C0E0
On White
2.02:1Fail
On Black
10.37:1AAA
Aa
Aa
#3D9AC9
On White
3.15:1Fail
On Black
6.66:1AA
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
#ECF7F8
#ECF5F8
#ECF4F9
#CCE5EF
#93C0D7
🌑
darker
· Reduced lightness, increased saturation
#7DD8E3
#73C3DE
#5AB1DD
#2698C9
#1F5F7F
🌫️
muted
· Desaturated for a calm, muted look
#DBE9EB
#D2E0E5
#C0D4DE
#8FB6C7
#628DA3
⚡
vibrant
· Boosted saturation for maximum impact
#3EE2F4
#40C5F2
#3CB8F6
#3ABFF8
#17A6EE