Jet#4E342E
Walnut#6D4C41
Gray#8D6E63
Stone#A1887F
Light Gray#D7CCC8
Color Palette
#4E342E · #6D4C41 · #8D6E63 · #A1887F · #D7CCC8
monochromatic0 likes
Share
Export for Developers
:root {
--color-1: #4E342E;
--color-1-rgb: 78, 52, 46;
--color-1-hsl: 11, 26%, 24%;
--color-2: #6D4C41;
--color-2-rgb: 109, 76, 65;
--color-2-hsl: 15, 25%, 34%;
--color-3: #8D6E63;
--color-3-rgb: 141, 110, 99;
--color-3-hsl: 16, 18%, 47%;
--color-4: #A1887F;
--color-4-rgb: 161, 136, 127;
--color-4-hsl: 16, 15%, 56%;
--color-5: #D7CCC8;
--color-5-rgb: 215, 204, 200;
--color-5-hsl: 16, 16%, 81%;
}Real World Preview
Get Started
Accessibility
WCAG Accessibility Report
Excellent#4E342E
On White
11.32:1AAA
On Black
1.85:1Fail
Aa
Aa
#6D4C41
On White
7.61:1AAA
On Black
2.76:1Fail
Aa
Aa
#8D6E63
On White
4.62:1AA
On Black
4.54:1AA
Aa
Aa
#A1887F
On White
3.31:1Fail
On Black
6.34:1AA
Aa
Aa
#D7CCC8
On White
1.57:1Fail
On Black
13.36: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
#82655E
#9B8178
#B2A8A4
#C5C0BF
#F3F2F1
🌑
darker
· Reduced lightness, increased saturation
#110A09
#2E1E19
#553D35
#6E5349
#B09287
🌫️
muted
· Desaturated for a calm, muted look
#3D3D3D
#575757
#787878
#8F8F8F
#CFCFCF
⚡
vibrant
· Boosted saturation for maximum impact
#9F422D
#9E4A2E
#B15D3E
#C1775C
#C8836A