Charcoal#2F3E46
Dark Slate Gray#354F52
Dim Gray#52796F
Dark Sea Green#84A98C
Light Gray#CAD2C5
Color Palette
#2F3E46 · #354F52 · #52796F · #84A98C · #CAD2C5
monochromatic0 likes
Share
Export for Developers
:root {
--color-1: #2F3E46;
--color-1-rgb: 47, 62, 70;
--color-1-hsl: 201, 20%, 23%;
--color-2: #354F52;
--color-2-rgb: 53, 79, 82;
--color-2-hsl: 186, 21%, 26%;
--color-3: #52796F;
--color-3-rgb: 82, 121, 111;
--color-3-hsl: 165, 19%, 40%;
--color-4: #84A98C;
--color-4-rgb: 132, 169, 140;
--color-4-hsl: 133, 18%, 59%;
--color-5: #CAD2C5;
--color-5-rgb: 202, 210, 197;
--color-5-hsl: 97, 13%, 80%;
}Real World Preview
Get Started
Accessibility
WCAG Accessibility Report
Excellent#2F3E46
On White
11.06:1AAA
On Black
1.9:1Fail
Aa
Aa
#354F52
On White
8.78:1AAA
On Black
2.39:1Fail
Aa
Aa
#52796F
On White
4.86:1AA
On Black
4.32:1Fail
Aa
Aa
#84A98C
On White
2.61:1Fail
On Black
8.03:1AAA
Aa
Aa
#CAD2C5
On White
1.55:1Fail
On Black
13.54: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
#637179
#688082
#90A29E
#C5CEC7
#F2F3F2
🌑
darker
· Reduced lightness, increased saturation
#0A0E10
#0B1213
#273F39
#4D7A56
#95AB87
🌫️
muted
· Desaturated for a calm, muted look
#3B3B3B
#424242
#666666
#969696
#CCCCCC
⚡
vibrant
· Boosted saturation for maximum impact
#337599
#32909A
#34987F
#64C97A
#8FC56D