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
#4F7FB5
#ADC3D2
#EAF3FA
#BDBDBD
#F1F3F4
🌑
darker
· Reduced lightness, increased saturation
#0C1B2C
#326181
#449FE9
#585C51
#A6BCC9
🌫️
muted
· Desaturated for a calm, muted look
#3E4E60
#828E97
#B2CCE1
#8A8A8A
#EBEBEB
⚡
vibrant
· Boosted saturation for maximum impact
#1360B9
#3D9CDB
#33A3FF
#96AE65
#66A7CC