Sapphire#1D4ED8
Royal Blue#2563EB
Cornflower Blue#60A5FA
Light Sky Blue#93C5FD
Periwinkle#BFDBFE

Color Palette

#1D4ED8 · #2563EB · #60A5FA · #93C5FD · #BFDBFE

monochromatic0 likes
Share

Export for Developers

:root {
  --color-1: #1D4ED8;
  --color-1-rgb: 29, 78, 216;
  --color-1-hsl: 224, 76%, 48%;
  --color-2: #2563EB;
  --color-2-rgb: 37, 99, 235;
  --color-2-hsl: 221, 83%, 53%;
  --color-3: #60A5FA;
  --color-3-rgb: 96, 165, 250;
  --color-3-hsl: 213, 94%, 68%;
  --color-4: #93C5FD;
  --color-4-rgb: 147, 197, 253;
  --color-4-hsl: 212, 96%, 78%;
  --color-5: #BFDBFE;
  --color-5-rgb: 191, 219, 254;
  --color-5-hsl: 213, 97%, 87%;
}

Real World Preview

Get Started

Accessibility

WCAG Accessibility Report

Excellent
#1D4ED8
On White
6.7:1AA
On Black
3.13:1Fail
Aa
Aa
#2563EB
On White
5.17:1AA
On Black
4.06:1Fail
Aa
Aa
#60A5FA
On White
2.54:1Fail
On Black
8.26:1AAA
Aa
Aa
#93C5FD
On White
1.8:1Fail
On Black
11.65:1AAA
Aa
Aa
#BFDBFE
On White
1.42:1Fail
On Black
14.78: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