Shortbread to Wood Bark Color Palette

About this palette

Shortbread to Wood Bark is a 5-color muted, cool palette: #FBE3D1 (Shortbread), #9288B5 (Magic Carpet), #524F65 (Freefall), #A2C5BF (Wild Life), #32281C (Wood Bark). It mixes orange, purple, turquoise, gray tones and feels cool overall. The strongest text pairing is #FBE3D1 on #32281C with a contrast ratio of 11.68:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Shortbread	rgb(251, 227, 209)	hsl(26, 84%, 90%)
Magic Carpet	rgb(146, 136, 181)	hsl(253, 23%, 62%)
Freefall	rgb(82, 79, 101)	hsl(248, 12%, 35%)
Wild Life	rgb(162, 197, 191)	hsl(170, 23%, 70%)
Wood Bark	rgb(50, 40, 28)	hsl(33, 28%, 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.

Aa11.68:1 Very good#FBE3D1 on #32281C
Aa11.68:1 Very good#32281C on #FBE3D1
Aa7.74:1 Very good#A2C5BF on #32281C
Aa7.74:1 Very good#32281C on #A2C5BF
Aa6.38:1 Good#FBE3D1 on #524F65
Aa6.38:1 Good#524F65 on #FBE3D1
Aa4.40:1 Poor#9288B5 on #32281C
Aa4.40:1 Poor#32281C on #9288B5

Color blindness preview

CSS variables

/* Shortbread to Wood Bark — https://swatchly.xyz/palette/fbe3d1-9288b5-524f65-a2c5bf-32281c */
:root {
  --shortbread: #fbe3d1;
  --magic-carpet: #9288b5;
  --freefall: #524f65;
  --wild-life: #a2c5bf;
  --wood-bark: #32281c;
}

Tailwind CSS v4

/* Shortbread to Wood Bark — https://swatchly.xyz/palette/fbe3d1-9288b5-524f65-a2c5bf-32281c */
@theme {
  --color-shortbread: #fbe3d1;
  --color-shortbread-50: #fdf0e5;
  --color-shortbread-100: #fbe3d1;
  --color-shortbread-200: #e3d1c4;
  --color-shortbread-300: #cfbbac;
  --color-shortbread-400: #b19b8b;
  --color-shortbread-500: #968170;
  --color-shortbread-600: #7b6757;
  --color-shortbread-700: #645143;
  --color-shortbread-800: #4f3f32;
  --color-shortbread-900: #3d3025;
  --color-shortbread-950: #271d16;
  --color-magic-carpet: #9288b5;
  --color-magic-carpet-50: #f7f5ff;
  --color-magic-carpet-100: #efecff;
  --color-magic-carpet-200: #ded7fa;
  --color-magic-carpet-300: #c9c1e9;
  --color-magic-carpet-400: #aca2ce;
  --color-magic-carpet-500: #9288b5;
  --color-magic-carpet-600: #766c97;
  --color-magic-carpet-700: #5d547b;
  --color-magic-carpet-800: #494063;
  --color-magic-carpet-900: #37304d;
  --color-magic-carpet-950: #221d31;
  --color-freefall: #524f65;
  --color-freefall-50: #f5f4ff;
  --color-freefall-100: #ebe9f9;
  --color-freefall-200: #d6d4e8;
  --color-freefall-300: #bfbdd3;
  --color-freefall-400: #9f9cb4;
  --color-freefall-500: #848198;
  --color-freefall-600: #69667c;
  --color-freefall-700: #524f65;
  --color-freefall-800: #403d4f;
  --color-freefall-900: #312f3d;
  --color-freefall-950: #1e1c27;
  --color-wild-life: #a2c5bf;
  --color-wild-life-50: #e4f8f4;
  --color-wild-life-100: #d7eeea;
  --color-wild-life-200: #c0dad6;
  --color-wild-life-300: #a2c5bf;
  --color-wild-life-400: #85a6a0;
  --color-wild-life-500: #6a8b86;
  --color-wild-life-600: #51716c;
  --color-wild-life-700: #3e5b56;
  --color-wild-life-800: #2e4844;
  --color-wild-life-900: #223834;
  --color-wild-life-950: #132320;
  --color-wood-bark: #32281c;
  --color-wood-bark-50: #fbf4eb;
  --color-wood-bark-100: #f2eae0;
  --color-wood-bark-200: #e0d6ca;
  --color-wood-bark-300: #cabfb2;
  --color-wood-bark-400: #aa9e8f;
  --color-wood-bark-500: #8d8072;
  --color-wood-bark-600: #706557;
  --color-wood-bark-700: #574d41;
  --color-wood-bark-800: #41392f;
  --color-wood-bark-900: #32281c;
  --color-wood-bark-950: #1c1812;
}