Onyx#2B2D42
Dark Gray#8D99AE
Smoke#EDF2F4
Crimson#EF233C
Crimson#D90429
Color Palette
#2B2D42 · #8D99AE · #EDF2F4 · #EF233C · #D90429
complementary0 likes
Share
Export for Developers
:root {
--color-1: #2B2D42;
--color-1-rgb: 43, 45, 66;
--color-1-hsl: 235, 21%, 21%;
--color-2: #8D99AE;
--color-2-rgb: 141, 153, 174;
--color-2-hsl: 218, 17%, 62%;
--color-3: #EDF2F4;
--color-3-rgb: 237, 242, 244;
--color-3-hsl: 197, 24%, 94%;
--color-4: #EF233C;
--color-4-rgb: 239, 35, 60;
--color-4-hsl: 353, 86%, 54%;
--color-5: #D90429;
--color-5-rgb: 217, 4, 41;
--color-5-hsl: 350, 96%, 43%;
}Real World Preview
Get Started
Accessibility
WCAG Accessibility Report
Excellent#2B2D42
On White
13.49:1AAA
On Black
1.56:1Fail
Aa
Aa
#8D99AE
On White
2.88:1Fail
On Black
7.3:1AAA
Aa
Aa
#EDF2F4
On White
1.13:1Fail
On Black
18.61:1AAA
Aa
Aa
#EF233C
On White
4.22:1Fail
On Black
4.98:1AA
Aa
Aa
#D90429
On White
5.25:1AA
On Black
4:1Fail
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
#5D5F74
#CED0D4
#F0F3F4
#EF8A96
#F2506B
🌑
darker
· Reduced lightness, increased saturation
#090A10
#546583
#A9C5D0
#A6081A
#750014
🌫️
muted
· Desaturated for a calm, muted look
#363636
#9E9E9E
#F0F0F0
#CB4857
#B6253D
⚡
vibrant
· Boosted saturation for maximum impact
#323B9A
#698CC9
#62B1D0
#FF1430
#DB0025