Dark Sea Green#A3BE8C
Sky Blue#88C0D0
Dark Gray#81A1C1
Steel Blue#5E81AC
Onyx#2E3440
Color Palette
#A3BE8C · #88C0D0 · #81A1C1 · #5E81AC · #2E3440
analogous1 likes
Share
Export for Developers
:root {
--color-1: #A3BE8C;
--color-1-rgb: 163, 190, 140;
--color-1-hsl: 92, 28%, 65%;
--color-2: #88C0D0;
--color-2-rgb: 136, 192, 208;
--color-2-hsl: 193, 43%, 67%;
--color-3: #81A1C1;
--color-3-rgb: 129, 161, 193;
--color-3-hsl: 210, 34%, 63%;
--color-4: #5E81AC;
--color-4-rgb: 94, 129, 172;
--color-4-hsl: 213, 32%, 52%;
--color-5: #2E3440;
--color-5-rgb: 46, 52, 64;
--color-5-hsl: 220, 16%, 22%;
}Real World Preview
Get Started
Accessibility
WCAG Accessibility Report
Excellent#A3BE8C
On White
2.04:1Fail
On Black
10.3:1AAA
Aa
Aa
#88C0D0
On White
2:1Fail
On Black
10.5:1AAA
Aa
Aa
#81A1C1
On White
2.69:1Fail
On Black
7.8:1AAA
Aa
Aa
#5E81AC
On White
4.03:1Fail
On Black
5.21:1AA
Aa
Aa
#2E3440
On White
12.49:1AAA
On Black
1.68: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
#D8E0D2
#D3E4E9
#C9D4DE
#A8B6C7
#656972
🌑
darker
· Reduced lightness, increased saturation
#70994D
#3E98B1
#436E98
#334F70
#0A0C0F
🌫️
muted
· Desaturated for a calm, muted look
#A6A6A6
#A0B1B6
#9DA1A4
#828487
#383838
⚡
vibrant
· Boosted saturation for maximum impact
#95D45E
#4FC3E3
#5899DA
#397DD0
#375695