Lavender#E2EAFC
Lavender#D7E3FC
Periwinkle#CCE5FF
Periwinkle#B6CCFE
Light Blue#ABC4FF
Color Palette
#E2EAFC · #D7E3FC · #CCE5FF · #B6CCFE · #ABC4FF
monochromatic0 likes
Share
Export for Developers
:root {
--color-1: #E2EAFC;
--color-1-rgb: 226, 234, 252;
--color-1-hsl: 222, 81%, 94%;
--color-2: #D7E3FC;
--color-2-rgb: 215, 227, 252;
--color-2-hsl: 221, 86%, 92%;
--color-3: #CCE5FF;
--color-3-rgb: 204, 229, 255;
--color-3-hsl: 211, 100%, 90%;
--color-4: #B6CCFE;
--color-4-rgb: 182, 204, 254;
--color-4-hsl: 222, 97%, 85%;
--color-5: #ABC4FF;
--color-5-rgb: 171, 196, 255;
--color-5-hsl: 222, 100%, 84%;
}Real World Preview
Get Started
Accessibility
WCAG Accessibility Report
Excellent#E2EAFC
On White
1.21:1Fail
On Black
17.41:1AAA
Aa
Aa
#D7E3FC
On White
1.29:1Fail
On Black
16.28:1AAA
Aa
Aa
#CCE5FF
On White
1.29:1Fail
On Black
16.22:1AAA
Aa
Aa
#B6CCFE
On White
1.61:1Fail
On Black
13.06:1AAA
Aa
Aa
#ABC4FF
On White
1.74:1Fail
On Black
12.07: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
#E9EFFB
#E9EFFC
#E7F2FE
#E7EEFD
#E7EEFE
🌑
darker
· Reduced lightness, increased saturation
#84A6F6
#77A0F9
#66B0FF
#4D82FF
#477EFF
🌫️
muted
· Desaturated for a calm, muted look
#E8EDF8
#DFE6F6
#D4E5F7
#BFCEF2
#BACBF3
⚡
vibrant
· Boosted saturation for maximum impact
#3370FF
#3374FF
#3396FF
#3370FF
#3370FF