Sign Up Sign Up
Serene12

Serene12

12-color palette · Cool · Mixed · Triadic harmony

Back to Library

Serene12

12-color palette · Cool temperature · Mixed tone · Triadic harmony

Modify
Muted 12 colors Cool Mixed Triadic colorful nature 9 serene
Likes 25
Colors 12

CSS variables

:root {
  --c-muted-1: #515D7B;
  --c-muted-2: #697B95;
  --c-muted-3: #9FB2CF;
  --c-muted-4: #667258;
  --c-muted-5: #7F956D;
  --c-muted-6: #A0C68D;
  --c-muted-7: #463E37;
  --c-muted-8: #807560;
  --c-muted-9: #ABA17F;
  --c-muted-10: #9AABA4;
  --c-muted-11: #B9C6BE;
  --c-muted-12: #D8E9E0;
}

About this palette

This 12-color muted palette runs from Clear Camouflage Green (#D8E9E0) as its lightest tone to Turkish Coffee (#463E37) as its darkest. It blends Coastal Fjord, Blue Suede, Stellar Blue, French Tarragon, Green Eyes, Cos, Turkish Coffee, Swamp, Ruskin Room Green, Halcyon Green, Inviting Veranda and Clear Camouflage Green into a single set you can drop straight into a UI. Of its 66 color pairings, 5 meet the WCAG AA contrast threshold (4.5:1) for body text — the strongest is #463E37 on #D8E9E0 at 8.31:1.

A versatile palette suitable for marketing pages, product hero blocks, illustrations, and accent UI states.

Color breakdown

Coastal Fjord #515D7B
RGB
rgb(81, 93, 123)
HSL
hsl(223, 21%, 40%)
Luminance
0.110
Blue Suede #697B95
RGB
rgb(105, 123, 149)
HSL
hsl(215, 17%, 50%)
Luminance
0.193
Stellar Blue #9FB2CF
RGB
rgb(159, 178, 207)
HSL
hsl(216, 33%, 72%)
Luminance
0.437
French Tarragon #667258
RGB
rgb(102, 114, 88)
HSL
hsl(88, 13%, 40%)
Luminance
0.156
Green Eyes #7F956D
RGB
rgb(127, 149, 109)
HSL
hsl(93, 16%, 51%)
Luminance
0.271
Cos #A0C68D
RGB
rgb(160, 198, 141)
HSL
hsl(100, 33%, 66%)
Luminance
0.498
Turkish Coffee #463E37
RGB
rgb(70, 62, 55)
HSL
hsl(28, 12%, 25%)
Luminance
0.050
Swamp #807560
RGB
rgb(128, 117, 96)
HSL
hsl(39, 14%, 44%)
Luminance
0.182
Ruskin Room Green #ABA17F
RGB
rgb(171, 161, 127)
HSL
hsl(46, 21%, 58%)
Luminance
0.357
Halcyon Green #9AABA4
RGB
rgb(154, 171, 164)
HSL
hsl(155, 9%, 64%)
Luminance
0.387
Inviting Veranda #B9C6BE
RGB
rgb(185, 198, 190)
HSL
hsl(143, 10%, 75%)
Luminance
0.544
Clear Camouflage Green #D8E9E0
RGB
rgb(216, 233, 224)
HSL
hsl(148, 28%, 88%)
Luminance
0.783

Contrast & accessibility

5 of 66 color pairings meet the WCAG AA contrast threshold (4.5:1) for body text.

Aa #463E37 on #D8E9E0 8.31:1 AAA
Aa #463E37 on #B9C6BE 5.93:1 AA
Aa #A0C68D on #463E37 5.47:1 AA
Aa #515D7B on #D8E9E0 5.20:1 AA
Aa #9FB2CF on #463E37 4.86:1 AA
Aa #463E37 on #9AABA4 4.36:1 AA Large
Aa #463E37 on #ABA17F 4.06:1 AA Large
Aa #667258 on #D8E9E0 4.05:1 AA Large
Aa #515D7B on #B9C6BE 3.71:1 AA Large
Aa #807560 on #D8E9E0 3.60:1 AA Large
Aa #515D7B on #A0C68D 3.42:1 AA Large
Aa #697B95 on #D8E9E0 3.42:1 AA Large
Aa #7F956D on #463E37 3.20:1 AA Large
Aa #515D7B on #9FB2CF 3.04:1 AA Large
Aa #667258 on #B9C6BE 2.89:1 Fail
Aa #515D7B on #9AABA4 2.73:1 Fail
Aa #667258 on #A0C68D 2.66:1 Fail
Aa #7F956D on #D8E9E0 2.59:1 Fail
Aa #807560 on #B9C6BE 2.57:1 Fail
Aa #515D7B on #ABA17F 2.54:1 Fail
Aa #697B95 on #B9C6BE 2.44:1 Fail
Aa #697B95 on #463E37 2.43:1 Fail
Aa #9FB2CF on #667258 2.37:1 Fail
Aa #A0C68D on #807560 2.37:1 Fail
Aa #463E37 on #807560 2.31:1 Fail
Aa #697B95 on #A0C68D 2.25:1 Fail
Aa #667258 on #9AABA4 2.12:1 Fail
Aa #9FB2CF on #807560 2.10:1 Fail
Aa #667258 on #463E37 2.05:1 Fail
Aa #ABA17F on #D8E9E0 2.05:1 Fail
Aa #515D7B on #7F956D 2.01:1 Fail
Aa #697B95 on #9FB2CF 2.00:1 Fail
Aa #667258 on #ABA17F 1.98:1 Fail
Aa #9AABA4 on #D8E9E0 1.91:1 Fail
Aa #807560 on #9AABA4 1.89:1 Fail
Aa #7F956D on #B9C6BE 1.85:1 Fail
Aa #697B95 on #9AABA4 1.79:1 Fail
Aa #807560 on #ABA17F 1.76:1 Fail
Aa #9FB2CF on #D8E9E0 1.71:1 Fail
Aa #7F956D on #A0C68D 1.71:1 Fail
Aa #697B95 on #ABA17F 1.67:1 Fail
Aa #515D7B on #463E37 1.60:1 Fail
Aa #667258 on #7F956D 1.56:1 Fail
Aa #515D7B on #697B95 1.52:1 Fail
Aa #9FB2CF on #7F956D 1.52:1 Fail
Aa #A0C68D on #D8E9E0 1.52:1 Fail
Aa #ABA17F on #B9C6BE 1.46:1 Fail
Aa #515D7B on #807560 1.45:1 Fail
Aa #B9C6BE on #D8E9E0 1.40:1 Fail
Aa #7F956D on #807560 1.39:1 Fail
Aa #7F956D on #9AABA4 1.36:1 Fail
Aa #9AABA4 on #B9C6BE 1.36:1 Fail
Aa #A0C68D on #ABA17F 1.35:1 Fail
Aa #697B95 on #7F956D 1.32:1 Fail
Aa #515D7B on #667258 1.28:1 Fail
Aa #7F956D on #ABA17F 1.27:1 Fail
Aa #A0C68D on #9AABA4 1.25:1 Fail
Aa #9FB2CF on #B9C6BE 1.22:1 Fail
Aa #9FB2CF on #ABA17F 1.20:1 Fail
Aa #697B95 on #667258 1.18:1 Fail
Aa #667258 on #807560 1.13:1 Fail
Aa #9FB2CF on #A0C68D 1.12:1 Fail
Aa #9FB2CF on #9AABA4 1.12:1 Fail
Aa #A0C68D on #B9C6BE 1.08:1 Fail
Aa #ABA17F on #9AABA4 1.07:1 Fail
Aa #697B95 on #807560 1.05:1 Fail

Similar palettes

#222831 #393E46 #00ADB5 #EEEEEE
4 colors
#F9F7F7 #DBE2EF #3F72AF #112D4E
4 colors
#1B262C #0F4C75 #3282B8 #BBE1FA
4 colors
#08D9D6 #252A34 #FF2E63 #EAEAEA
4 colors
#27374D #526D82 #9DB2BF #DDE6ED
4 colors
#364F6B #3FC1C9 #F5F5F5 #FC5185
4 colors
#E4F9F5 #30E3CA #11999E #40514E
4 colors
#F0F5F9 #C9D6DF #52616B #1E2022
4 colors