Dark Slate Gray#274C77
Cadet Blue#6096BA
Light Blue#A3CEF1
Stone#8B8C89
Lavender#E7ECEF

Color Palette

#274C77 · #6096BA · #A3CEF1 · #8B8C89 · #E7ECEF

analogous0 likes
Share

Export for Developers

:root {
  --color-1: #274C77;
  --color-1-rgb: 39, 76, 119;
  --color-1-hsl: 212, 51%, 31%;
  --color-2: #6096BA;
  --color-2-rgb: 96, 150, 186;
  --color-2-hsl: 204, 39%, 55%;
  --color-3: #A3CEF1;
  --color-3-rgb: 163, 206, 241;
  --color-3-hsl: 207, 74%, 79%;
  --color-4: #8B8C89;
  --color-4-rgb: 139, 140, 137;
  --color-4-hsl: 80, 1%, 54%;
  --color-5: #E7ECEF;
  --color-5-rgb: 231, 236, 239;
  --color-5-hsl: 202, 20%, 92%;
}

Real World Preview

Get Started

Accessibility

WCAG Accessibility Report

Excellent
#274C77
On White
8.8:1AAA
On Black
2.39:1Fail
Aa
Aa
#6096BA
On White
3.2:1Fail
On Black
6.57:1AA
Aa
Aa
#A3CEF1
On White
1.66:1Fail
On Black
12.66:1AAA
Aa
Aa
#8B8C89
On White
3.38:1Fail
On Black
6.21:1AA
Aa
Aa
#E7ECEF
On White
1.19:1Fail
On Black
17.64: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