Black Magic to Night Demons Color Palette

About this palette

Black Magic to Night Demons is a 5-color muted palette: #524756 (Black Magic), #99B7B8 (Cool), #538380 (Paradiso), #E2D2C0 (Sand Dune), #1F1B21 (Night Demons). It mixes gray, turquoise tones and feels cool overall. The strongest text pairing is #E2D2C0 on #1F1B21 with a contrast ratio of 11.49:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Black Magic	rgb(82, 71, 86)	hsl(284, 10%, 31%)
Cool	rgb(153, 183, 184)	hsl(182, 18%, 66%)
Paradiso	rgb(83, 131, 128)	hsl(176, 22%, 42%)
Sand Dune	rgb(226, 210, 192)	hsl(32, 37%, 82%)
Night Demons	rgb(31, 27, 33)	hsl(280, 10%, 12%)

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.49:1 Very good#E2D2C0 on #1F1B21
Aa11.49:1 Very good#1F1B21 on #E2D2C0
Aa7.94:1 Very good#99B7B8 on #1F1B21
Aa7.94:1 Very good#1F1B21 on #99B7B8
Aa5.94:1 Good#524756 on #E2D2C0
Aa5.94:1 Good#E2D2C0 on #524756
Aa4.10:1 Poor#524756 on #99B7B8
Aa4.10:1 Poor#99B7B8 on #524756

Color blindness preview

CSS variables

/* Black Magic to Night Demons — https://swatchly.xyz/palette/524756-99b7b8-538380-e2d2c0-1f1b21 */
:root {
  --black-magic: #524756;
  --cool: #99b7b8;
  --paradiso: #538380;
  --sand-dune: #e2d2c0;
  --night-demons: #1f1b21;
}

Tailwind CSS v4

/* Black Magic to Night Demons — https://swatchly.xyz/palette/524756-99b7b8-538380-e2d2c0-1f1b21 */
@theme {
  --color-black-magic: #524756;
  --color-black-magic-50: #f9f2fc;
  --color-black-magic-100: #f0e8f3;
  --color-black-magic-200: #ddd3e1;
  --color-black-magic-300: #c9becd;
  --color-black-magic-400: #aca0b1;
  --color-black-magic-500: #928697;
  --color-black-magic-600: #796e7e;
  --color-black-magic-700: #645968;
  --color-black-magic-800: #524756;
  --color-black-magic-900: #3f3742;
  --color-black-magic-950: #28222b;
  --color-cool: #99b7b8;
  --color-cool-50: #eefeff;
  --color-cool-100: #e6f7f8;
  --color-cool-200: #d2e7e7;
  --color-cool-300: #bbd3d4;
  --color-cool-400: #99b7b8;
  --color-cool-500: #7c9899;
  --color-cool-600: #5f7b7c;
  --color-cool-700: #476162;
  --color-cool-800: #354b4c;
  --color-cool-900: #26393a;
  --color-cool-950: #152223;
  --color-paradiso: #538380;
  --color-paradiso-50: #e0fcfa;
  --color-paradiso-100: #d7f5f2;
  --color-paradiso-200: #c1e5e2;
  --color-paradiso-300: #a9d2cf;
  --color-paradiso-400: #87b5b2;
  --color-paradiso-500: #6c9c99;
  --color-paradiso-600: #538380;
  --color-paradiso-700: #3c6966;
  --color-paradiso-800: #2a5250;
  --color-paradiso-900: #1c3f3d;
  --color-paradiso-950: #0e2826;
  --color-sand-dune: #e2d2c0;
  --color-sand-dune-50: #fbf2e7;
  --color-sand-dune-100: #f1e7dc;
  --color-sand-dune-200: #e2d2c0;
  --color-sand-dune-300: #cabcad;
  --color-sand-dune-400: #ac9d8d;
  --color-sand-dune-500: #918272;
  --color-sand-dune-600: #766859;
  --color-sand-dune-700: #5f5344;
  --color-sand-dune-800: #4b4034;
  --color-sand-dune-900: #3a3126;
  --color-sand-dune-950: #251e16;
  --color-night-demons: #1f1b21;
  --color-night-demons-50: #f7f4f8;
  --color-night-demons-100: #edeaef;
  --color-night-demons-200: #dad6dc;
  --color-night-demons-300: #c3bfc6;
  --color-night-demons-400: #a49fa7;
  --color-night-demons-500: #88838b;
  --color-night-demons-600: #6d6970;
  --color-night-demons-700: #565258;
  --color-night-demons-800: #433f44;
  --color-night-demons-900: #322f34;
  --color-night-demons-950: #1f1b21;
}