Wood Bark to Anise Biscotti Color Palette

About this palette

Wood Bark to Anise Biscotti is a 4-color muted, vintage palette: #332613 (Wood Bark), #47597D (Sailor), #7B90BF (King Neptune), #E4D7AD (Anise Biscotti). It mixes brown, blue, yellow tones and feels balanced overall. The strongest text pairing is #332613 on #E4D7AD with a contrast ratio of 10.24:1, and 3 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Wood Bark	rgb(51, 38, 19)	hsl(36, 46%, 14%)
Sailor	rgb(71, 89, 125)	hsl(220, 28%, 38%)
King Neptune	rgb(123, 144, 191)	hsl(221, 35%, 62%)
Anise Biscotti	rgb(228, 215, 173)	hsl(46, 50%, 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.24:1 Very good#332613 on #E4D7AD
Aa10.24:1 Very good#E4D7AD on #332613
Aa4.89:1 Good#47597D on #E4D7AD
Aa4.89:1 Good#E4D7AD on #47597D
Aa4.61:1 Good#332613 on #7B90BF
Aa4.61:1 Good#7B90BF on #332613

Color blindness preview

CSS variables

/* Wood Bark to Anise Biscotti — https://swatchly.xyz/palette/332613-47597d-7b90bf-e4d7ad */
:root {
  --wood-bark: #332613;
  --sailor: #47597d;
  --king-neptune: #7b90bf;
  --anise-biscotti: #e4d7ad;
}

Tailwind CSS v4

/* Wood Bark to Anise Biscotti — https://swatchly.xyz/palette/332613-47597d-7b90bf-e4d7ad */
@theme {
  --color-wood-bark: #332613;
  --color-wood-bark-50: #fdf4e7;
  --color-wood-bark-100: #f4e9db;
  --color-wood-bark-200: #e2d5c4;
  --color-wood-bark-300: #cdbfab;
  --color-wood-bark-400: #af9f8a;
  --color-wood-bark-500: #958570;
  --color-wood-bark-600: #7c6d58;
  --color-wood-bark-700: #665845;
  --color-wood-bark-800: #534736;
  --color-wood-bark-900: #44392a;
  --color-wood-bark-950: #332613;
  --color-sailor: #47597d;
  --color-sailor-50: #f0f5ff;
  --color-sailor-100: #e1ecff;
  --color-sailor-200: #c9d9f8;
  --color-sailor-300: #b1c3e6;
  --color-sailor-400: #91a4ca;
  --color-sailor-500: #7689b0;
  --color-sailor-600: #5d6f94;
  --color-sailor-700: #47597d;
  --color-sailor-800: #374563;
  --color-sailor-900: #29354e;
  --color-sailor-950: #182133;
  --color-king-neptune: #7b90bf;
  --color-king-neptune-50: #f3f7ff;
  --color-king-neptune-100: #e8efff;
  --color-king-neptune-200: #ceddff;
  --color-king-neptune-300: #b6c8f1;
  --color-king-neptune-400: #96aad7;
  --color-king-neptune-500: #7b90bf;
  --color-king-neptune-600: #5f73a0;
  --color-king-neptune-700: #495b84;
  --color-king-neptune-800: #36466a;
  --color-king-neptune-900: #283553;
  --color-king-neptune-950: #172036;
  --color-anise-biscotti: #e4d7ad;
  --color-anise-biscotti-50: #fcf5de;
  --color-anise-biscotti-100: #f3ebd1;
  --color-anise-biscotti-200: #e4d7ad;
  --color-anise-biscotti-300: #cbc19d;
  --color-anise-biscotti-400: #ada17a;
  --color-anise-biscotti-500: #92865e;
  --color-anise-biscotti-600: #776b45;
  --color-anise-biscotti-700: #5f5532;
  --color-anise-biscotti-800: #4b4223;
  --color-anise-biscotti-900: #3a3218;
  --color-anise-biscotti-950: #251f0c;
}