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

🌑

darker

· Reduced lightness, increased saturation

🌫️

muted

· Desaturated for a calm, muted look

vibrant

· Boosted saturation for maximum impact