Sign Up Sign Up
H2O

H2O

10-color palette · Cool · Dark · Triadic harmony

Back to Library

H2O

10-color palette · Cool temperature · Dark tone · Triadic harmony

Modify
Muted 10 colors Cool Dark Triadic green blue lagoon
Likes 18
Colors 10

CSS variables

:root {
  --c-muted-1: #090909;
  --c-muted-2: #18173C;
  --c-muted-3: #293329;
  --c-muted-4: #244457;
  --c-muted-5: #315C3D;
  --c-muted-6: #3B8271;
  --c-muted-7: #519A59;
  --c-muted-8: #92B0A8;
  --c-muted-9: #82CC92;
  --c-muted-10: #EFD7E6;
}

About this palette

This 10-color muted palette runs from All Made Up (#EFD7E6) as its lightest tone to Badab Black Wash (#090909) as its darkest. It blends Badab Black Wash, Nightwalker, Gordons Green, Astronaut Blue, Verde Garrafa, Copper Mineral Green, Clover Patch, Delicate Green, Good Luck Charm and All Made Up into a single set you can drop straight into a UI. Of its 45 color pairings, 14 meet the WCAG AA contrast threshold (4.5:1) for body text — the strongest is #090909 on #EFD7E6 at 14.73:1.

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

Color breakdown

Badab Black Wash #090909
RGB
rgb(9, 9, 9)
HSL
hsl(0, 0%, 4%)
Luminance
0.003
Nightwalker #18173C
RGB
rgb(24, 23, 60)
HSL
hsl(242, 45%, 16%)
Luminance
0.011
Gordons Green #293329
RGB
rgb(41, 51, 41)
HSL
hsl(120, 11%, 18%)
Luminance
0.030
Astronaut Blue #244457
RGB
rgb(36, 68, 87)
HSL
hsl(202, 41%, 24%)
Luminance
0.052
Verde Garrafa #315C3D
RGB
rgb(49, 92, 61)
HSL
hsl(137, 30%, 28%)
Luminance
0.086
Copper Mineral Green #3B8271
RGB
rgb(59, 130, 113)
HSL
hsl(166, 38%, 37%)
Luminance
0.181
Clover Patch #519A59
RGB
rgb(81, 154, 89)
HSL
hsl(127, 31%, 46%)
Luminance
0.256
Delicate Green #92B0A8
RGB
rgb(146, 176, 168)
HSL
hsl(164, 16%, 63%)
Luminance
0.400
Good Luck Charm #82CC92
RGB
rgb(130, 204, 146)
HSL
hsl(133, 42%, 65%)
Luminance
0.500
All Made Up #EFD7E6
RGB
rgb(239, 215, 230)
HSL
hsl(323, 43%, 89%)
Luminance
0.727

Contrast & accessibility

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

Aa #090909 on #EFD7E6 14.73:1 AAA
Aa #18173C on #EFD7E6 12.66:1 AAA
Aa #090909 on #82CC92 10.43:1 AAA
Aa #293329 on #EFD7E6 9.71:1 AAA
Aa #18173C on #82CC92 8.97:1 AAA
Aa #090909 on #92B0A8 8.53:1 AAA
Aa #244457 on #EFD7E6 7.62:1 AAA
Aa #18173C on #92B0A8 7.34:1 AAA
Aa #293329 on #82CC92 6.88:1 AA
Aa #090909 on #519A59 5.80:1 AA
Aa #315C3D on #EFD7E6 5.69:1 AA
Aa #293329 on #92B0A8 5.62:1 AA
Aa #244457 on #82CC92 5.39:1 AA
Aa #18173C on #519A59 4.99:1 AA
Aa #244457 on #92B0A8 4.41:1 AA Large
Aa #090909 on #3B8271 4.38:1 AA Large
Aa #315C3D on #82CC92 4.03:1 AA Large
Aa #293329 on #519A59 3.82:1 AA Large
Aa #18173C on #3B8271 3.76:1 AA Large
Aa #3B8271 on #EFD7E6 3.36:1 AA Large
Aa #315C3D on #92B0A8 3.30:1 AA Large
Aa #244457 on #519A59 3.00:1 AA Large
Aa #293329 on #3B8271 2.89:1 Fail
Aa #090909 on #315C3D 2.59:1 Fail
Aa #519A59 on #EFD7E6 2.54:1 Fail
Aa #3B8271 on #82CC92 2.38:1 Fail
Aa #244457 on #3B8271 2.26:1 Fail
Aa #315C3D on #519A59 2.24:1 Fail
Aa #18173C on #315C3D 2.22:1 Fail
Aa #3B8271 on #92B0A8 1.95:1 Fail
Aa #090909 on #244457 1.93:1 Fail
Aa #519A59 on #82CC92 1.80:1 Fail
Aa #92B0A8 on #EFD7E6 1.73:1 Fail
Aa #293329 on #315C3D 1.71:1 Fail
Aa #315C3D on #3B8271 1.69:1 Fail
Aa #18173C on #244457 1.66:1 Fail
Aa #090909 on #293329 1.52:1 Fail
Aa #519A59 on #92B0A8 1.47:1 Fail
Aa #82CC92 on #EFD7E6 1.41:1 Fail
Aa #244457 on #315C3D 1.34:1 Fail
Aa #3B8271 on #519A59 1.32:1 Fail
Aa #18173C on #293329 1.30:1 Fail
Aa #293329 on #244457 1.27:1 Fail
Aa #92B0A8 on #82CC92 1.22:1 Fail
Aa #090909 on #18173C 1.16:1 Fail

Similar palettes

#212121 #323232 #0D7377 #14FFEC
4 colors
#0A2647 #144272 #205295 #2C74B3
4 colors
#040D12 #183D3D #5C8374 #93B1A6
4 colors
#142850 #27496D #0C7B93 #00A8CC
4 colors
#635985 #443C68 #393053 #18122B
4 colors
#000000 #150050 #3F0071 #610094
4 colors
#151515 #301B3F #3C415C #B4A5A5
4 colors
#041C32 #04293A #064663 #ECB365
4 colors