Underworld to Black Magic Color Palette

About this palette

Underworld to Black Magic is a 5-color muted, warm palette: #15211B (Underworld), #BDA6B7 (Foggy Plum), #E6F7FF (Silent Snowfall), #9A7A68 (Woodhaven), #533E4D (Black Magic). It mixes gray, pink, white, orange, purple tones and feels warm overall. The strongest text pairing is #15211B on #E6F7FF with a contrast ratio of 15.11:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Underworld	rgb(21, 33, 27)	hsl(150, 22%, 11%)
Foggy Plum	rgb(189, 166, 183)	hsl(316, 15%, 70%)
Silent Snowfall	rgb(230, 247, 255)	hsl(199, 100%, 95%)
Woodhaven	rgb(154, 122, 104)	hsl(22, 20%, 51%)
Black Magic	rgb(83, 62, 77)	hsl(317, 14%, 28%)

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.

Aa15.11:1 Super#15211B on #E6F7FF
Aa15.11:1 Super#E6F7FF on #15211B
Aa8.83:1 Very good#E6F7FF on #533E4D
Aa8.83:1 Very good#533E4D on #E6F7FF
Aa7.35:1 Very good#15211B on #BDA6B7
Aa7.35:1 Very good#BDA6B7 on #15211B
Aa4.30:1 Poor#BDA6B7 on #533E4D
Aa4.30:1 Poor#533E4D on #BDA6B7

Color blindness preview

CSS variables

/* Underworld to Black Magic — https://swatchly.xyz/palette/15211b-bda6b7-e6f7ff-9a7a68-533e4d */
:root {
  --underworld: #15211b;
  --foggy-plum: #bda6b7;
  --silent-snowfall: #e6f7ff;
  --woodhaven: #9a7a68;
  --black-magic: #533e4d;
}

Tailwind CSS v4

/* Underworld to Black Magic — https://swatchly.xyz/palette/15211b-bda6b7-e6f7ff-9a7a68-533e4d */
@theme {
  --color-underworld: #15211b;
  --color-underworld-50: #eff8f3;
  --color-underworld-100: #e4eee9;
  --color-underworld-200: #cfdbd4;
  --color-underworld-300: #b7c5bd;
  --color-underworld-400: #97a69e;
  --color-underworld-500: #7b8a82;
  --color-underworld-600: #616f68;
  --color-underworld-700: #4b5851;
  --color-underworld-800: #39443f;
  --color-underworld-900: #2b342f;
  --color-underworld-950: #15211b;
  --color-foggy-plum: #bda6b7;
  --color-foggy-plum-50: #fff7fd;
  --color-foggy-plum-100: #fbedf7;
  --color-foggy-plum-200: #ebdae7;
  --color-foggy-plum-300: #d8c5d3;
  --color-foggy-plum-400: #bda6b7;
  --color-foggy-plum-500: #9f8999;
  --color-foggy-plum-600: #816c7c;
  --color-foggy-plum-700: #675462;
  --color-foggy-plum-800: #51404c;
  --color-foggy-plum-900: #3d2f3a;
  --color-foggy-plum-950: #251c23;
  --color-silent-snowfall: #e6f7ff;
  --color-silent-snowfall-50: #e6f7ff;
  --color-silent-snowfall-100: #e2ecf1;
  --color-silent-snowfall-200: #cdd9df;
  --color-silent-snowfall-300: #b5c3c9;
  --color-silent-snowfall-400: #95a4ab;
  --color-silent-snowfall-500: #798990;
  --color-silent-snowfall-600: #606e75;
  --color-silent-snowfall-700: #4a585e;
  --color-silent-snowfall-800: #39444a;
  --color-silent-snowfall-900: #2b3539;
  --color-silent-snowfall-950: #192024;
  --color-woodhaven: #9a7a68;
  --color-woodhaven-50: #fff1ea;
  --color-woodhaven-100: #fbe4d8;
  --color-woodhaven-200: #eacfc0;
  --color-woodhaven-300: #d5b7a6;
  --color-woodhaven-400: #b69684;
  --color-woodhaven-500: #9a7a68;
  --color-woodhaven-600: #7f6150;
  --color-woodhaven-700: #674c3c;
  --color-woodhaven-800: #523a2d;
  --color-woodhaven-900: #402c21;
  --color-woodhaven-950: #291b13;
  --color-black-magic: #533e4d;
  --color-black-magic-50: #fff0fa;
  --color-black-magic-100: #f6e6f1;
  --color-black-magic-200: #e4d1de;
  --color-black-magic-300: #d0bac9;
  --color-black-magic-400: #b29bab;
  --color-black-magic-500: #978090;
  --color-black-magic-600: #7d6676;
  --color-black-magic-700: #65515f;
  --color-black-magic-800: #533e4d;
  --color-black-magic-900: #3f303b;
  --color-black-magic-950: #281d25;
}