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
#F8ECF9
#F3E7FE
#EDE7FE
#E7EEFE
#E7F3FE
🌑
darker
· Reduced lightness, increased saturation
#E17CE4
#B05CFF
#7D52FF
#578CFF
#3DA1FF
🌫️
muted
· Desaturated for a calm, muted look
#EBDAEC
#E1CBF6
#CFC2F4
#C7D5F5
#B1D2F1
⚡
vibrant
· Boosted saturation for maximum impact
#F03CF6
#9C33FF
#6633FF
#3374FF
#339CFF