Wizard’s Brew to Fedora Color Palette

About this palette

Wizard’s Brew to Fedora is a 5-color muted palette: #9893B5 (Wizard’s Brew), #BAB5D7 (Moonraker), #F5F4FF (Cloud Break), #34303F (Shuriken), #5A5868 (Fedora). It mixes purple, white, gray tones and feels cool overall. The strongest text pairing is #F5F4FF on #34303F with a contrast ratio of 11.74:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Wizard’s Brew	rgb(152, 147, 181)	hsl(249, 19%, 64%)
Moonraker	rgb(186, 181, 215)	hsl(249, 30%, 78%)
Cloud Break	rgb(245, 244, 255)	hsl(245, 100%, 98%)
Shuriken	rgb(52, 48, 63)	hsl(256, 14%, 22%)
Fedora	rgb(90, 88, 104)	hsl(248, 8%, 38%)

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.74:1 Very good#F5F4FF on #34303F
Aa11.74:1 Very good#34303F on #F5F4FF
Aa6.51:1 Good#BAB5D7 on #34303F
Aa6.51:1 Good#34303F on #BAB5D7
Aa6.36:1 Good#F5F4FF on #5A5868
Aa6.36:1 Good#5A5868 on #F5F4FF
Aa4.37:1 Poor#9893B5 on #34303F
Aa4.37:1 Poor#34303F on #9893B5

Color blindness preview

CSS variables

/* Wizard’s Brew to Fedora — https://swatchly.xyz/palette/9893b5-bab5d7-f5f4ff-34303f-5a5868 */
:root {
  --wizard-s-brew: #9893b5;
  --moonraker: #bab5d7;
  --cloud-break: #f5f4ff;
  --shuriken: #34303f;
  --fedora: #5a5868;
}

Tailwind CSS v4

/* Wizard’s Brew to Fedora — https://swatchly.xyz/palette/9893b5-bab5d7-f5f4ff-34303f-5a5868 */
@theme {
  --color-wizard-s-brew: #9893b5;
  --color-wizard-s-brew-50: #f1f0ff;
  --color-wizard-s-brew-100: #e6e3fb;
  --color-wizard-s-brew-200: #d1cde9;
  --color-wizard-s-brew-300: #b9b4d4;
  --color-wizard-s-brew-400: #9893b5;
  --color-wizard-s-brew-500: #7f7a9a;
  --color-wizard-s-brew-600: #666180;
  --color-wizard-s-brew-700: #514d68;
  --color-wizard-s-brew-800: #403c54;
  --color-wizard-s-brew-900: #322e43;
  --color-wizard-s-brew-950: #1f1d2c;
  --color-moonraker: #bab5d7;
  --color-moonraker-50: #f1efff;
  --color-moonraker-100: #e6e3fa;
  --color-moonraker-200: #d1cee9;
  --color-moonraker-300: #bab5d7;
  --color-moonraker-400: #9c97b7;
  --color-moonraker-500: #827d9d;
  --color-moonraker-600: #696482;
  --color-moonraker-700: #534f6a;
  --color-moonraker-800: #423e55;
  --color-moonraker-900: #333044;
  --color-moonraker-950: #1f1d2b;
  --color-cloud-break: #f5f4ff;
  --color-cloud-break-50: #f5f4ff;
  --color-cloud-break-100: #ebeaf1;
  --color-cloud-break-200: #d7d7df;
  --color-cloud-break-300: #c1c0c9;
  --color-cloud-break-400: #a1a0aa;
  --color-cloud-break-500: #86858f;
  --color-cloud-break-600: #6b6a74;
  --color-cloud-break-700: #55545c;
  --color-cloud-break-800: #424149;
  --color-cloud-break-900: #333238;
  --color-cloud-break-950: #1f1f23;
  --color-shuriken: #34303f;
  --color-shuriken-50: #f6f3fe;
  --color-shuriken-100: #ece9f5;
  --color-shuriken-200: #d8d5e3;
  --color-shuriken-300: #c2bece;
  --color-shuriken-400: #a39eb0;
  --color-shuriken-500: #878395;
  --color-shuriken-600: #6d697a;
  --color-shuriken-700: #565362;
  --color-shuriken-800: #43404d;
  --color-shuriken-900: #34303f;
  --color-shuriken-950: #201e26;
  --color-fedora: #5a5868;
  --color-fedora-50: #f5f4fe;
  --color-fedora-100: #ebeaf5;
  --color-fedora-200: #d8d7e4;
  --color-fedora-300: #c2c1d0;
  --color-fedora-400: #a4a2b3;
  --color-fedora-500: #898799;
  --color-fedora-600: #706e7e;
  --color-fedora-700: #5a5868;
  --color-fedora-800: #464452;
  --color-fedora-900: #36343f;
  --color-fedora-950: #212028;
}