Midnight Blue#0B3C5D
Steel Blue#328CC1
Goldenrod#D9B310
Eerie Black#1D2731
Smoke#F9F7F3
Color Palette
#0B3C5D · #328CC1 · #D9B310 · #1D2731 · #F9F7F3
complementary0 likes
Share
Export for Developers
:root {
--color-1: #0B3C5D;
--color-1-rgb: 11, 60, 93;
--color-1-hsl: 204, 79%, 20%;
--color-2: #328CC1;
--color-2-rgb: 50, 140, 193;
--color-2-hsl: 202, 59%, 48%;
--color-3: #D9B310;
--color-3-rgb: 217, 179, 16;
--color-3-hsl: 49, 86%, 46%;
--color-4: #1D2731;
--color-4-rgb: 29, 39, 49;
--color-4-hsl: 210, 26%, 15%;
--color-5: #F9F7F3;
--color-5-rgb: 249, 247, 243;
--color-5-hsl: 40, 33%, 96%;
}Real World Preview
Get Started
Accessibility
WCAG Accessibility Report
Excellent#0B3C5D
On White
11.55:1AAA
On Black
1.82:1Fail
Aa
Aa
#328CC1
On White
3.71:1Fail
On Black
5.66:1AA
Aa
Aa
#D9B310
On White
2.02:1Fail
On Black
10.41:1AAA
Aa
Aa
#1D2731
On White
15.14:1AAA
On Black
1.39:1Fail
Aa
Aa
#F9F7F3
On White
1.07:1Fail
On Black
19.63: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
#2074AC
#85B8D5
#EAD266
#4B5968
#F5F3EF
🌑
darker
· Reduced lightness, increased saturation
#020F17
#1A5475
#7F6906
#090D11
#D9CAAB
🌫️
muted
· Desaturated for a calm, muted look
#1A384C
#57849E
#B79F34
#262626
#F5F5F4
⚡
vibrant
· Boosted saturation for maximum impact
#007ACC
#0D97E7
#EBC000
#2D669F
#D9AE59