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

🌑

darker

· Reduced lightness, increased saturation

🌫️

muted

· Desaturated for a calm, muted look

vibrant

· Boosted saturation for maximum impact