Jet#1E293B
Charcoal#334155
Charcoal#475569
Slate Gray#64748B
Dark Gray#94A3B8
Color Palette
#1E293B · #334155 · #475569 · #64748B · #94A3B8
monochromatic0 likes
Share
Export for Developers
:root {
--color-1: #1E293B;
--color-1-rgb: 30, 41, 59;
--color-1-hsl: 217, 33%, 17%;
--color-2: #334155;
--color-2-rgb: 51, 65, 85;
--color-2-hsl: 215, 25%, 27%;
--color-3: #475569;
--color-3-rgb: 71, 85, 105;
--color-3-hsl: 215, 19%, 35%;
--color-4: #64748B;
--color-4-rgb: 100, 116, 139;
--color-4-hsl: 215, 16%, 47%;
--color-5: #94A3B8;
--color-5-rgb: 148, 163, 184;
--color-5-hsl: 215, 20%, 65%;
}Real World Preview
Get Started
Accessibility
WCAG Accessibility Report
Excellent#1E293B
On White
14.63:1AAA
On Black
1.44:1Fail
Aa
Aa
#334155
On White
10.35:1AAA
On Black
2.03:1Fail
Aa
Aa
#475569
On White
7.58:1AAA
On Black
2.77:1Fail
Aa
Aa
#64748B
On White
4.76:1AA
On Black
4.41:1Fail
Aa
Aa
#94A3B8
On White
2.56:1Fail
On Black
8.19: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
#495974
#66758A
#828B97
#A6AAB0
#D5D8DD
🌑
darker
· Reduced lightness, increased saturation
#080C12
#0C1117
#1D252F
#364253
#566E8F
🌫️
muted
· Desaturated for a calm, muted look
#2A2B2D
#454545
#595959
#787878
#A6A6A6
⚡
vibrant
· Boosted saturation for maximum impact
#2657A6
#2E5D9E
#345E98
#416FAF
#6691CC