Lavender#F3D1F4
Mauve#E2C2FF
Periwinkle#C8B6FF
Periwinkle#BBD0FF
Light Sky Blue#A2D2FF

Color Palette

#F3D1F4 · #E2C2FF · #C8B6FF · #BBD0FF · #A2D2FF

analogous0 likes
Share

Export for Developers

:root {
  --color-1: #F3D1F4;
  --color-1-rgb: 243, 209, 244;
  --color-1-hsl: 298, 61%, 89%;
  --color-2: #E2C2FF;
  --color-2-rgb: 226, 194, 255;
  --color-2-hsl: 271, 100%, 88%;
  --color-3: #C8B6FF;
  --color-3-rgb: 200, 182, 255;
  --color-3-hsl: 255, 100%, 86%;
  --color-4: #BBD0FF;
  --color-4-rgb: 187, 208, 255;
  --color-4-hsl: 221, 100%, 87%;
  --color-5: #A2D2FF;
  --color-5-rgb: 162, 210, 255;
  --color-5-hsl: 209, 100%, 82%;
}

Real World Preview

Get Started

Accessibility

WCAG Accessibility Report

Excellent
#F3D1F4
On White
1.38:1Fail
On Black
15.24:1AAA
Aa
Aa
#E2C2FF
On White
1.57:1Fail
On Black
13.39:1AAA
Aa
Aa
#C8B6FF
On White
1.81:1Fail
On Black
11.59:1AAA
Aa
Aa
#BBD0FF
On White
1.55:1Fail
On Black
13.58:1AAA
Aa
Aa
#A2D2FF
On White
1.59:1Fail
On Black
13.2: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