Black Magic to Wood Bark Color Palette

About this palette

Black Magic to Wood Bark is a 5-color muted palette: #4B475A (Black Magic), #53878D (Arctic), #A8B19C (Gargoyle), #BADEE6 (Quick-Freeze), #2C2321 (Wood Bark). It mixes gray, turquoise tones and feels cool overall. The strongest text pairing is #BADEE6 on #2C2321 with a contrast ratio of 10.72:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Black Magic	rgb(75, 71, 90)	hsl(253, 12%, 32%)
Arctic	rgb(83, 135, 141)	hsl(186, 26%, 44%)
Gargoyle	rgb(168, 177, 156)	hsl(86, 12%, 65%)
Quick-Freeze	rgb(186, 222, 230)	hsl(191, 47%, 82%)
Wood Bark	rgb(44, 35, 33)	hsl(11, 14%, 15%)

Accessible color pairs

Pairs with at least 3:1 contrast (large text and UI components); 4.5:1 or more passes WCAG AA for body text.

Aa10.72:1 Very good#BADEE6 on #2C2321
Aa10.72:1 Very good#2C2321 on #BADEE6
Aa6.89:1 Good#A8B19C on #2C2321
Aa6.89:1 Good#2C2321 on #A8B19C
Aa6.25:1 Good#4B475A on #BADEE6
Aa6.25:1 Good#BADEE6 on #4B475A
Aa4.02:1 Poor#4B475A on #A8B19C
Aa4.02:1 Poor#A8B19C on #4B475A

Color blindness preview

CSS variables

/* Black Magic to Wood Bark — https://swatchly.xyz/palette/4b475a-53878d-a8b19c-badee6-2c2321 */
:root {
  --black-magic: #4b475a;
  --arctic: #53878d;
  --gargoyle: #a8b19c;
  --quick-freeze: #badee6;
  --wood-bark: #2c2321;
}

Tailwind CSS v4

/* Black Magic to Wood Bark — https://swatchly.xyz/palette/4b475a-53878d-a8b19c-badee6-2c2321 */
@theme {
  --color-black-magic: #4b475a;
  --color-black-magic-50: #f5f3ff;
  --color-black-magic-100: #ece9f7;
  --color-black-magic-200: #d8d5e6;
  --color-black-magic-300: #c3bfd3;
  --color-black-magic-400: #a5a1b6;
  --color-black-magic-500: #8b879c;
  --color-black-magic-600: #726e82;
  --color-black-magic-700: #5d596c;
  --color-black-magic-800: #4b475a;
  --color-black-magic-900: #3a3745;
  --color-black-magic-950: #24222d;
  --color-arctic: #53878d;
  --color-arctic-50: #dcfafe;
  --color-arctic-100: #cdeff3;
  --color-arctic-200: #b2dbe0;
  --color-arctic-300: #95c4ca;
  --color-arctic-400: #71a4aa;
  --color-arctic-500: #53878d;
  --color-arctic-600: #3c6e73;
  --color-arctic-700: #2a585d;
  --color-arctic-800: #1d454a;
  --color-arctic-900: #13363a;
  --color-arctic-950: #092225;
  --color-gargoyle: #a8b19c;
  --color-gargoyle-50: #f6fbf0;
  --color-gargoyle-100: #eef4e7;
  --color-gargoyle-200: #dce2d3;
  --color-gargoyle-300: #c7cebd;
  --color-gargoyle-400: #a8b19c;
  --color-gargoyle-500: #8b937f;
  --color-gargoyle-600: #6e7763;
  --color-gargoyle-700: #565e4c;
  --color-gargoyle-800: #424839;
  --color-gargoyle-900: #31372a;
  --color-gargoyle-950: #1d2118;
  --color-quick-freeze: #badee6;
  --color-quick-freeze-50: #e5f9fd;
  --color-quick-freeze-100: #d9eff4;
  --color-quick-freeze-200: #badee6;
  --color-quick-freeze-300: #a8c6cd;
  --color-quick-freeze-400: #86a8af;
  --color-quick-freeze-500: #6b8c94;
  --color-quick-freeze-600: #517279;
  --color-quick-freeze-700: #3d5b61;
  --color-quick-freeze-800: #2d474d;
  --color-quick-freeze-900: #21373c;
  --color-quick-freeze-950: #122226;
  --color-wood-bark: #2c2321;
  --color-wood-bark-50: #faf3f2;
  --color-wood-bark-100: #f1e9e7;
  --color-wood-bark-200: #ded5d3;
  --color-wood-bark-300: #c9bebc;
  --color-wood-bark-400: #aa9f9c;
  --color-wood-bark-500: #908582;
  --color-wood-bark-600: #766b69;
  --color-wood-bark-700: #605654;
  --color-wood-bark-800: #4d4543;
  --color-wood-bark-900: #3e3635;
  --color-wood-bark-950: #2c2321;
}