Wood Bark to Cold White Color Palette

About this palette

Wood Bark to Cold White is a 4-color muted palette: #332420 (Wood Bark), #7C4D44 (Nutmeg), #6EA9B6 (Blue Eye Samurai), #F0FBFF (Cold White). It mixes gray, red, turquoise, white tones and feels balanced overall. The strongest text pairing is #332420 on #F0FBFF with a contrast ratio of 14.11:1, and 3 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Wood Bark	rgb(51, 36, 32)	hsl(13, 23%, 16%)
Nutmeg	rgb(124, 77, 68)	hsl(10, 29%, 38%)
Blue Eye Samurai	rgb(110, 169, 182)	hsl(191, 33%, 57%)
Cold White	rgb(240, 251, 255)	hsl(196, 100%, 97%)

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.

Aa14.11:1 Super#332420 on #F0FBFF
Aa14.11:1 Super#F0FBFF on #332420
Aa6.64:1 Good#7C4D44 on #F0FBFF
Aa6.64:1 Good#F0FBFF on #7C4D44
Aa5.67:1 Good#332420 on #6EA9B6
Aa5.67:1 Good#6EA9B6 on #332420

Color blindness preview

CSS variables

/* Wood Bark to Cold White — https://swatchly.xyz/palette/332420-7c4d44-6ea9b6-f0fbff */
:root {
  --wood-bark: #332420;
  --nutmeg: #7c4d44;
  --blue-eye-samurai: #6ea9b6;
  --cold-white: #f0fbff;
}

Tailwind CSS v4

/* Wood Bark to Cold White — https://swatchly.xyz/palette/332420-7c4d44-6ea9b6-f0fbff */
@theme {
  --color-wood-bark: #332420;
  --color-wood-bark-50: #fef2ef;
  --color-wood-bark-100: #f5e8e4;
  --color-wood-bark-200: #e3d4d0;
  --color-wood-bark-300: #cebdb8;
  --color-wood-bark-400: #af9d98;
  --color-wood-bark-500: #96837e;
  --color-wood-bark-600: #7d6b66;
  --color-wood-bark-700: #675652;
  --color-wood-bark-800: #544541;
  --color-wood-bark-900: #443734;
  --color-wood-bark-950: #332420;
  --color-nutmeg: #7c4d44;
  --color-nutmeg-50: #fff2ef;
  --color-nutmeg-100: #ffe4df;
  --color-nutmeg-200: #f7cec5;
  --color-nutmeg-300: #e5b7ad;
  --color-nutmeg-400: #c9978d;
  --color-nutmeg-500: #af7c72;
  --color-nutmeg-600: #936359;
  --color-nutmeg-700: #7c4d44;
  --color-nutmeg-800: #623b34;
  --color-nutmeg-900: #4d2c26;
  --color-nutmeg-950: #321a16;
  --color-blue-eye-samurai: #6ea9b6;
  --color-blue-eye-samurai-50: #e0f9ff;
  --color-blue-eye-samurai-100: #ccf1fa;
  --color-blue-eye-samurai-200: #b2dee8;
  --color-blue-eye-samurai-300: #95c8d3;
  --color-blue-eye-samurai-400: #6ea9b6;
  --color-blue-eye-samurai-500: #538e9a;
  --color-blue-eye-samurai-600: #3a737f;
  --color-blue-eye-samurai-700: #275c67;
  --color-blue-eye-samurai-800: #184952;
  --color-blue-eye-samurai-900: #0e3941;
  --color-blue-eye-samurai-950: #05242a;
  --color-cold-white: #f0fbff;
  --color-cold-white-50: #f0fbff;
  --color-cold-white-100: #e9eff2;
  --color-cold-white-200: #d4dbde;
  --color-cold-white-300: #bbc4c8;
  --color-cold-white-400: #9ba5a8;
  --color-cold-white-500: #7f898c;
  --color-cold-white-600: #646e71;
  --color-cold-white-700: #4e575a;
  --color-cold-white-800: #3c4446;
  --color-cold-white-900: #2e3436;
  --color-cold-white-950: #1c2022;
}