Jet#22223B
Charcoal#4A4E69
Stone#9A8C98
Tan#C9ADA7
Linen#F2E9E4
Color Palette
#22223B · #4A4E69 · #9A8C98 · #C9ADA7 · #F2E9E4
analogous0 likes
Share
Export for Developers
:root {
--color-1: #22223B;
--color-1-rgb: 34, 34, 59;
--color-1-hsl: 240, 27%, 18%;
--color-2: #4A4E69;
--color-2-rgb: 74, 78, 105;
--color-2-hsl: 232, 17%, 35%;
--color-3: #9A8C98;
--color-3-rgb: 154, 140, 152;
--color-3-hsl: 309, 6%, 58%;
--color-4: #C9ADA7;
--color-4-rgb: 201, 173, 167;
--color-4-hsl: 11, 24%, 72%;
--color-5: #F2E9E4;
--color-5-rgb: 242, 233, 228;
--color-5-hsl: 21, 35%, 92%;
}Real World Preview
Get Started
Accessibility
WCAG Accessibility Report
Excellent#22223B
On White
15.44:1AAA
On Black
1.36:1Fail
Aa
Aa
#4A4E69
On White
8.12:1AAA
On Black
2.58:1Fail
Aa
Aa
#9A8C98
On White
3.19:1Fail
On Black
6.58:1AA
Aa
Aa
#C9ADA7
On White
2.1:1Fail
On Black
10.02:1AAA
Aa
Aa
#F2E9E4
On White
1.2:1Fail
On Black
17.55: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
#505071
#848694
#C7C7C7
#EDE9E8
#F5F1EF
🌑
darker
· Reduced lightness, increased saturation
#090911
#1E202F
#6C5668
#A86E61
#D4AF9B
🌫️
muted
· Desaturated for a calm, muted look
#2E2E2E
#595959
#949494
#B8B8B8
#ECEAEA
⚡
vibrant
· Boosted saturation for maximum impact
#2C2CA0
#364396
#BA6DAF
#D07662
#DB8557