Wood Bark to Ice Cube Color Palette

About this palette

Wood Bark to Ice Cube is a 5-color warm, vintage palette: #37211C (Wood Bark), #612D5C (Opulent Purple), #26918E (Java), #BC92AC (Mauve Magic), #ABE6DD (Ice Cube). It mixes brown, purple, turquoise, pink tones and feels warm overall. The strongest text pairing is #37211C on #ABE6DD with a contrast ratio of 10.81:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Wood Bark	rgb(55, 33, 28)	hsl(11, 33%, 16%)
Opulent Purple	rgb(97, 45, 92)	hsl(306, 37%, 28%)
Java	rgb(38, 145, 142)	hsl(178, 58%, 36%)
Mauve Magic	rgb(188, 146, 172)	hsl(323, 24%, 65%)
Ice Cube	rgb(171, 230, 221)	hsl(171, 54%, 79%)

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.81:1 Very good#37211C on #ABE6DD
Aa10.81:1 Very good#ABE6DD on #37211C
Aa7.41:1 Very good#612D5C on #ABE6DD
Aa7.41:1 Very good#ABE6DD on #612D5C
Aa5.62:1 Good#37211C on #BC92AC
Aa5.62:1 Good#BC92AC on #37211C
Aa3.95:1 Poor#37211C on #26918E
Aa3.95:1 Poor#26918E on #37211C

Color blindness preview

CSS variables

/* Wood Bark to Ice Cube — https://swatchly.xyz/palette/37211c-612d5c-26918e-bc92ac-abe6dd */
:root {
  --wood-bark: #37211c;
  --opulent-purple: #612d5c;
  --java: #26918e;
  --mauve-magic: #bc92ac;
  --ice-cube: #abe6dd;
}

Tailwind CSS v4

/* Wood Bark to Ice Cube — https://swatchly.xyz/palette/37211c-612d5c-26918e-bc92ac-abe6dd */
@theme {
  --color-wood-bark: #37211c;
  --color-wood-bark-50: #fff2ef;
  --color-wood-bark-100: #fae6e2;
  --color-wood-bark-200: #e8d2cc;
  --color-wood-bark-300: #d4bab4;
  --color-wood-bark-400: #b69a94;
  --color-wood-bark-500: #9c817a;
  --color-wood-bark-600: #826862;
  --color-wood-bark-700: #6c544e;
  --color-wood-bark-800: #58433e;
  --color-wood-bark-900: #483531;
  --color-wood-bark-950: #37211c;
  --color-opulent-purple: #612d5c;
  --color-opulent-purple-50: #fff0fd;
  --color-opulent-purple-100: #ffe0fa;
  --color-opulent-purple-200: #f5c6ee;
  --color-opulent-purple-300: #e2addb;
  --color-opulent-purple-400: #c58cbe;
  --color-opulent-purple-500: #aa70a3;
  --color-opulent-purple-600: #8d5787;
  --color-opulent-purple-700: #74426e;
  --color-opulent-purple-800: #612d5c;
  --color-opulent-purple-900: #492445;
  --color-opulent-purple-950: #2f152d;
  --color-java: #26918e;
  --color-java-50: #cffffc;
  --color-java-100: #bcf6f3;
  --color-java-200: #9de3e0;
  --color-java-300: #7bcdca;
  --color-java-400: #4eaeaa;
  --color-java-500: #26918e;
  --color-java-600: #007674;
  --color-java-700: #005e5c;
  --color-java-800: #004a48;
  --color-java-900: #003938;
  --color-java-950: #002423;
  --color-mauve-magic: #bc92ac;
  --color-mauve-magic-50: #fff0f9;
  --color-mauve-magic-100: #fee1f2;
  --color-mauve-magic-200: #edcce0;
  --color-mauve-magic-300: #d9b3ca;
  --color-mauve-magic-400: #bc92ac;
  --color-mauve-magic-500: #a07790;
  --color-mauve-magic-600: #845e76;
  --color-mauve-magic-700: #6b485e;
  --color-mauve-magic-800: #55374a;
  --color-mauve-magic-900: #43293a;
  --color-mauve-magic-950: #2b1824;
  --color-ice-cube: #abe6dd;
  --color-ice-cube-50: #defdf8;
  --color-ice-cube-100: #d1f5ef;
  --color-ice-cube-200: #abe6dd;
  --color-ice-cube-300: #9ccdc5;
  --color-ice-cube-400: #78aea6;
  --color-ice-cube-500: #5a938b;
  --color-ice-cube-600: #407870;
  --color-ice-cube-700: #2c6059;
  --color-ice-cube-800: #1d4b46;
  --color-ice-cube-900: #123a36;
  --color-ice-cube-950: #082521;
}