Sign Up Sign Up
SAWBUZZ 12

SAWBUZZ 12

12-color palette · Cool · Dark · Analogous harmony

Back to Library

SAWBUZZ 12

12-color palette · Cool temperature · Dark tone · Analogous harmony

Modify
Muted 12 colors Cool Dark Analogous grey machine desturated
Likes 14
Colors 12

CSS variables

:root {
  --c-muted-1: #111219;
  --c-muted-2: #1E2C31;
  --c-muted-3: #2B3A33;
  --c-muted-4: #335153;
  --c-muted-5: #3F5243;
  --c-muted-6: #4D5E4A;
  --c-muted-7: #282840;
  --c-muted-8: #35394E;
  --c-muted-9: #414C5B;
  --c-muted-10: #32231C;
  --c-muted-11: #433322;
  --c-muted-12: #564B29;
}

About this palette

This 12-color muted palette runs from Fresh Pine (#4D5E4A) as its lightest tone to Black Is Back (#111219) as its darkest. It blends Black Is Back, Infinity, Tetsu Black, Blue Dianne, Pine Forest, Fresh Pine, Valhalla, Old Mill, Cavalry, Kenpōzome Black, Iroko and Codium Fragile into a single set you can drop straight into a UI. None of the 66 in-palette color pairings clear the WCAG AA contrast threshold (4.5:1), so pair these colors with black or white for body text.

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

Color breakdown

Black Is Back #111219
RGB
rgb(17, 18, 25)
HSL
hsl(233, 19%, 8%)
Luminance
0.006
Infinity #1E2C31
RGB
rgb(30, 44, 49)
HSL
hsl(196, 24%, 15%)
Luminance
0.023
Tetsu Black #2B3A33
RGB
rgb(43, 58, 51)
HSL
hsl(152, 15%, 20%)
Luminance
0.038
Blue Dianne #335153
RGB
rgb(51, 81, 83)
HSL
hsl(184, 24%, 26%)
Luminance
0.072
Pine Forest #3F5243
RGB
rgb(63, 82, 67)
HSL
hsl(133, 13%, 28%)
Luminance
0.075
Fresh Pine #4D5E4A
RGB
rgb(77, 94, 74)
HSL
hsl(111, 12%, 33%)
Luminance
0.101
Valhalla #282840
RGB
rgb(40, 40, 64)
HSL
hsl(240, 23%, 20%)
Luminance
0.023
Old Mill #35394E
RGB
rgb(53, 57, 78)
HSL
hsl(230, 19%, 26%)
Luminance
0.042
Cavalry #414C5B
RGB
rgb(65, 76, 91)
HSL
hsl(215, 17%, 31%)
Luminance
0.071
Kenpōzome Black #32231C
RGB
rgb(50, 35, 28)
HSL
hsl(19, 28%, 15%)
Luminance
0.020
Iroko #433322
RGB
rgb(67, 51, 34)
HSL
hsl(31, 33%, 20%)
Luminance
0.037
Codium Fragile #564B29
RGB
rgb(86, 75, 41)
HSL
hsl(45, 35%, 25%)
Luminance
0.072

Contrast & accessibility

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

Aa #111219 on #4D5E4A 2.68:1 Fail
Aa #111219 on #3F5243 2.22:1 Fail
Aa #111219 on #335153 2.17:1 Fail
Aa #4D5E4A on #32231C 2.17:1 Fail
Aa #111219 on #564B29 2.16:1 Fail
Aa #111219 on #414C5B 2.14:1 Fail
Aa #1E2C31 on #4D5E4A 2.07:1 Fail
Aa #4D5E4A on #282840 2.05:1 Fail
Aa #3F5243 on #32231C 1.79:1 Fail
Aa #335153 on #32231C 1.75:1 Fail
Aa #32231C on #564B29 1.75:1 Fail
Aa #4D5E4A on #433322 1.74:1 Fail
Aa #414C5B on #32231C 1.73:1 Fail
Aa #2B3A33 on #4D5E4A 1.72:1 Fail
Aa #1E2C31 on #3F5243 1.71:1 Fail
Aa #3F5243 on #282840 1.70:1 Fail
Aa #1E2C31 on #335153 1.67:1 Fail
Aa #1E2C31 on #564B29 1.67:1 Fail
Aa #335153 on #282840 1.66:1 Fail
Aa #282840 on #564B29 1.66:1 Fail
Aa #1E2C31 on #414C5B 1.65:1 Fail
Aa #111219 on #35394E 1.64:1 Fail
Aa #282840 on #414C5B 1.64:1 Fail
Aa #4D5E4A on #35394E 1.63:1 Fail
Aa #111219 on #2B3A33 1.56:1 Fail
Aa #111219 on #433322 1.54:1 Fail
Aa #3F5243 on #433322 1.44:1 Fail
Aa #2B3A33 on #3F5243 1.42:1 Fail
Aa #335153 on #433322 1.41:1 Fail
Aa #433322 on #564B29 1.40:1 Fail
Aa #2B3A33 on #335153 1.39:1 Fail
Aa #2B3A33 on #564B29 1.39:1 Fail
Aa #414C5B on #433322 1.39:1 Fail
Aa #2B3A33 on #414C5B 1.37:1 Fail
Aa #3F5243 on #35394E 1.35:1 Fail
Aa #35394E on #32231C 1.33:1 Fail
Aa #335153 on #35394E 1.32:1 Fail
Aa #35394E on #564B29 1.32:1 Fail
Aa #111219 on #282840 1.31:1 Fail
Aa #111219 on #1E2C31 1.30:1 Fail
Aa #35394E on #414C5B 1.30:1 Fail
Aa #1E2C31 on #35394E 1.26:1 Fail
Aa #2B3A33 on #32231C 1.26:1 Fail
Aa #282840 on #35394E 1.26:1 Fail
Aa #4D5E4A on #414C5B 1.25:1 Fail
Aa #32231C on #433322 1.25:1 Fail
Aa #111219 on #32231C 1.24:1 Fail
Aa #4D5E4A on #564B29 1.24:1 Fail
Aa #335153 on #4D5E4A 1.23:1 Fail
Aa #3F5243 on #4D5E4A 1.21:1 Fail
Aa #1E2C31 on #2B3A33 1.20:1 Fail
Aa #2B3A33 on #282840 1.20:1 Fail
Aa #1E2C31 on #433322 1.19:1 Fail
Aa #282840 on #433322 1.18:1 Fail
Aa #35394E on #433322 1.06:1 Fail
Aa #1E2C31 on #32231C 1.05:1 Fail
Aa #2B3A33 on #35394E 1.05:1 Fail
Aa #282840 on #32231C 1.05:1 Fail
Aa #3F5243 on #414C5B 1.04:1 Fail
Aa #3F5243 on #564B29 1.03:1 Fail
Aa #335153 on #3F5243 1.02:1 Fail
Aa #1E2C31 on #282840 1.01:1 Fail
Aa #2B3A33 on #433322 1.01:1 Fail
Aa #335153 on #414C5B 1.01:1 Fail
Aa #414C5B on #564B29 1.01:1 Fail
Aa #335153 on #564B29 1.00: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