Wizard’s Brew to Wood Bark color palette

9F8BBBWizard’s Brew BCCCB8Isle of Dreams 8F6B46Barrel Aged 4C5768Heavy Violet 332613Wood Bark

About this palette

Wizard’s Brew to Wood Bark is a 5-color muted, vintage palette: #9F8BBB (Wizard’s Brew), #BCCCB8 (Isle of Dreams), #8F6B46 (Barrel Aged), #4C5768 (Heavy Violet), #332613 (Wood Bark). It mixes purple, gray, brown tones and feels warm overall. The strongest text pairing is #BCCCB8 on #332613 with a contrast ratio of 8.73:1, and 2 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Wizard’s Brew	rgb(159, 139, 187)	hsl(265, 26%, 64%)
Isle of Dreams	rgb(188, 204, 184)	hsl(108, 16%, 76%)
Barrel Aged	rgb(143, 107, 70)	hsl(30, 34%, 42%)
Heavy Violet	rgb(76, 87, 104)	hsl(216, 16%, 35%)
Wood Bark	rgb(51, 38, 19)	hsl(36, 46%, 14%)

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.

Aa8.73:1 Very good#BCCCB8 on #332613
Aa8.73:1 Very good#332613 on #BCCCB8
Aa4.82:1 Good#9F8BBB on #332613
Aa4.82:1 Good#332613 on #9F8BBB
Aa4.34:1 Poor#BCCCB8 on #4C5768
Aa4.34:1 Poor#4C5768 on #BCCCB8
Aa3.05:1 Poor#8F6B46 on #332613
Aa3.05:1 Poor#332613 on #8F6B46

Color blindness preview

CSS variables

/* Wizard’s Brew to Wood Bark — https://swatchly.xyz/palette/9f8bbb-bcccb8-8f6b46-4c5768-332613 */
:root {
  --wizard-s-brew: #9f8bbb;
  --isle-of-dreams: #bcccb8;
  --barrel-aged: #8f6b46;
  --heavy-violet: #4c5768;
  --wood-bark: #332613;
}

Tailwind CSS v4

/* Wizard’s Brew to Wood Bark — https://swatchly.xyz/palette/9f8bbb-bcccb8-8f6b46-4c5768-332613 */
@theme {
  --color-wizard-s-brew: #9f8bbb;
  --color-wizard-s-brew-50: #f4edff;
  --color-wizard-s-brew-100: #ebdeff;
  --color-wizard-s-brew-200: #d7c7ef;
  --color-wizard-s-brew-300: #bfadda;
  --color-wizard-s-brew-400: #9f8bbb;
  --color-wizard-s-brew-500: #8672a1;
  --color-wizard-s-brew-600: #6d5a86;
  --color-wizard-s-brew-700: #58476e;
  --color-wizard-s-brew-800: #463759;
  --color-wizard-s-brew-900: #372a47;
  --color-wizard-s-brew-950: #231a2f;
  --color-isle-of-dreams: #bcccb8;
  --color-isle-of-dreams-50: #f2fbf0;
  --color-isle-of-dreams-100: #e9f2e6;
  --color-isle-of-dreams-200: #d5e0d2;
  --color-isle-of-dreams-300: #bcccb8;
  --color-isle-of-dreams-400: #9cab99;
  --color-isle-of-dreams-500: #808f7c;
  --color-isle-of-dreams-600: #657361;
  --color-isle-of-dreams-700: #4e5b4b;
  --color-isle-of-dreams-800: #3c4739;
  --color-isle-of-dreams-900: #2d362a;
  --color-isle-of-dreams-950: #1b2119;
  --color-barrel-aged: #8f6b46;
  --color-barrel-aged-50: #fff3e7;
  --color-barrel-aged-100: #ffe8d2;
  --color-barrel-aged-200: #f2d4b8;
  --color-barrel-aged-300: #dfbe9e;
  --color-barrel-aged-400: #c49f7b;
  --color-barrel-aged-500: #aa845f;
  --color-barrel-aged-600: #8f6b46;
  --color-barrel-aged-700: #745431;
  --color-barrel-aged-800: #5d4022;
  --color-barrel-aged-900: #483016;
  --color-barrel-aged-950: #2e1d0a;
  --color-heavy-violet: #4c5768;
  --color-heavy-violet-50: #eff6ff;
  --color-heavy-violet-100: #e4ecf8;
  --color-heavy-violet-200: #cfd8e7;
  --color-heavy-violet-300: #b7c2d3;
  --color-heavy-violet-400: #97a3b5;
  --color-heavy-violet-500: #7c889a;
  --color-heavy-violet-600: #626d7f;
  --color-heavy-violet-700: #4c5768;
  --color-heavy-violet-800: #3b4452;
  --color-heavy-violet-900: #2c3440;
  --color-heavy-violet-950: #1b2028;
  --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;
}