Wood Bark to Stardust Color Palette

About this palette

Wood Bark to Stardust is a 5-color muted, warm palette: #2C2819 (Wood Bark), #563B52 (Purple Prose), #5C787A (North Atlantic), #B9A2B5 (Lily), #D8D1AD (Stardust). It mixes gray, purple, pink, yellow tones and feels warm overall. The strongest text pairing is #2C2819 on #D8D1AD with a contrast ratio of 9.58:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Wood Bark	rgb(44, 40, 25)	hsl(47, 28%, 14%)
Purple Prose	rgb(86, 59, 82)	hsl(309, 19%, 28%)
North Atlantic	rgb(92, 120, 122)	hsl(184, 14%, 42%)
Lily	rgb(185, 162, 181)	hsl(310, 14%, 68%)
Stardust	rgb(216, 209, 173)	hsl(50, 36%, 76%)

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.

Aa9.58:1 Very good#2C2819 on #D8D1AD
Aa9.58:1 Very good#D8D1AD on #2C2819
Aa6.37:1 Good#563B52 on #D8D1AD
Aa6.37:1 Good#D8D1AD on #563B52
Aa6.25:1 Good#2C2819 on #B9A2B5
Aa6.25:1 Good#B9A2B5 on #2C2819
Aa4.15:1 Poor#563B52 on #B9A2B5
Aa4.15:1 Poor#B9A2B5 on #563B52

Color blindness preview

CSS variables

/* Wood Bark to Stardust — https://swatchly.xyz/palette/2c2819-563b52-5c787a-b9a2b5-d8d1ad */
:root {
  --wood-bark: #2c2819;
  --purple-prose: #563b52;
  --north-atlantic: #5c787a;
  --lily: #b9a2b5;
  --stardust: #d8d1ad;
}

Tailwind CSS v4

/* Wood Bark to Stardust — https://swatchly.xyz/palette/2c2819-563b52-5c787a-b9a2b5-d8d1ad */
@theme {
  --color-wood-bark: #2c2819;
  --color-wood-bark-50: #f8f5eb;
  --color-wood-bark-100: #eeebdf;
  --color-wood-bark-200: #dbd8c9;
  --color-wood-bark-300: #c5c1b1;
  --color-wood-bark-400: #a6a290;
  --color-wood-bark-500: #8d8876;
  --color-wood-bark-600: #746f5e;
  --color-wood-bark-700: #5f5a4b;
  --color-wood-bark-800: #4d493b;
  --color-wood-bark-900: #3e3b2e;
  --color-wood-bark-950: #2c2819;
  --color-purple-prose: #563b52;
  --color-purple-prose-50: #fff0fc;
  --color-purple-prose-100: #f9e4f5;
  --color-purple-prose-200: #e7cfe3;
  --color-purple-prose-300: #d3b8cf;
  --color-purple-prose-400: #b698b1;
  --color-purple-prose-500: #9b7d96;
  --color-purple-prose-600: #80637c;
  --color-purple-prose-700: #684e64;
  --color-purple-prose-800: #563b52;
  --color-purple-prose-900: #412e3e;
  --color-purple-prose-950: #2a1c28;
  --color-north-atlantic: #5c787a;
  --color-north-atlantic-50: #e8f9fa;
  --color-north-atlantic-100: #def1f2;
  --color-north-atlantic-200: #c9dfe0;
  --color-north-atlantic-300: #b1cacc;
  --color-north-atlantic-400: #90acae;
  --color-north-atlantic-500: #759294;
  --color-north-atlantic-600: #5c787a;
  --color-north-atlantic-700: #466061;
  --color-north-atlantic-800: #344b4c;
  --color-north-atlantic-900: #263a3b;
  --color-north-atlantic-950: #162425;
  --color-lily: #b9a2b5;
  --color-lily-50: #fff5fd;
  --color-lily-100: #f9ebf7;
  --color-lily-200: #e9d8e6;
  --color-lily-300: #d5c2d2;
  --color-lily-400: #b9a2b5;
  --color-lily-500: #9b8598;
  --color-lily-600: #7f6a7b;
  --color-lily-700: #655262;
  --color-lily-800: #4f3f4d;
  --color-lily-900: #3d2f3b;
  --color-lily-950: #251c24;
  --color-stardust: #d8d1ad;
  --color-stardust-50: #f5f1db;
  --color-stardust-100: #eae6ce;
  --color-stardust-200: #d8d1ad;
  --color-stardust-300: #c2bc9d;
  --color-stardust-400: #a49e7c;
  --color-stardust-500: #8a8362;
  --color-stardust-600: #716a4a;
  --color-stardust-700: #5b5538;
  --color-stardust-800: #484329;
  --color-stardust-900: #38331d;
  --color-stardust-950: #231f10;
}