Night Demons to Seedling Color Palette

About this palette

Night Demons to Seedling is a 5-color muted, cool palette: #201B29 (Night Demons), #544365 (Nightly Walk), #62744D (Ghoul), #AD98BC (Enchanted Lilac), #C6CCA2 (Seedling). It mixes gray, purple, green tones and feels cool overall. The strongest text pairing is #201B29 on #C6CCA2 with a contrast ratio of 10.05:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Night Demons	rgb(32, 27, 41)	hsl(261, 21%, 13%)
Nightly Walk	rgb(84, 67, 101)	hsl(270, 20%, 33%)
Ghoul	rgb(98, 116, 77)	hsl(88, 20%, 38%)
Enchanted Lilac	rgb(173, 152, 188)	hsl(275, 21%, 67%)
Seedling	rgb(198, 204, 162)	hsl(69, 29%, 72%)

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.

Aa10.05:1 Very good#201B29 on #C6CCA2
Aa10.05:1 Very good#C6CCA2 on #201B29
Aa6.39:1 Good#201B29 on #AD98BC
Aa6.39:1 Good#AD98BC on #201B29
Aa5.30:1 Good#544365 on #C6CCA2
Aa5.30:1 Good#C6CCA2 on #544365
Aa3.38:1 Poor#544365 on #AD98BC
Aa3.38:1 Poor#AD98BC on #544365

Color blindness preview

CSS variables

/* Night Demons to Seedling — https://swatchly.xyz/palette/201b29-544365-62744d-ad98bc-c6cca2 */
:root {
  --night-demons: #201b29;
  --nightly-walk: #544365;
  --ghoul: #62744d;
  --enchanted-lilac: #ad98bc;
  --seedling: #c6cca2;
}

Tailwind CSS v4

/* Night Demons to Seedling — https://swatchly.xyz/palette/201b29-544365-62744d-ad98bc-c6cca2 */
@theme {
  --color-night-demons: #201b29;
  --color-night-demons-50: #f7f3fe;
  --color-night-demons-100: #ede9f5;
  --color-night-demons-200: #d9d5e3;
  --color-night-demons-300: #c3bece;
  --color-night-demons-400: #a49eb0;
  --color-night-demons-500: #888294;
  --color-night-demons-600: #6e6879;
  --color-night-demons-700: #575261;
  --color-night-demons-800: #433f4c;
  --color-night-demons-900: #332f3a;
  --color-night-demons-950: #201b29;
  --color-nightly-walk: #544365;
  --color-nightly-walk-50: #f8f2ff;
  --color-nightly-walk-100: #f1e5ff;
  --color-nightly-walk-200: #dfd0ef;
  --color-nightly-walk-300: #cbbbdd;
  --color-nightly-walk-400: #ae9cc1;
  --color-nightly-walk-500: #9582a8;
  --color-nightly-walk-600: #7b6a8e;
  --color-nightly-walk-700: #665576;
  --color-nightly-walk-800: #544365;
  --color-nightly-walk-900: #41344d;
  --color-nightly-walk-950: #292033;
  --color-ghoul: #62744d;
  --color-ghoul-50: #eefae2;
  --color-ghoul-100: #e4f1d6;
  --color-ghoul-200: #cfdebe;
  --color-ghoul-300: #b7c9a5;
  --color-ghoul-400: #97aa82;
  --color-ghoul-500: #7c8f67;
  --color-ghoul-600: #62744d;
  --color-ghoul-700: #4c5c39;
  --color-ghoul-800: #3b482a;
  --color-ghoul-900: #2c381e;
  --color-ghoul-950: #1a2310;
  --color-enchanted-lilac: #ad98bc;
  --color-enchanted-lilac-50: #f9f2ff;
  --color-enchanted-lilac-100: #f3e5fd;
  --color-enchanted-lilac-200: #e0d0ec;
  --color-enchanted-lilac-300: #cbb9d8;
  --color-enchanted-lilac-400: #ad98bc;
  --color-enchanted-lilac-500: #917da0;
  --color-enchanted-lilac-600: #766384;
  --color-enchanted-lilac-700: #5f4d6b;
  --color-enchanted-lilac-800: #4b3b55;
  --color-enchanted-lilac-900: #3a2d43;
  --color-enchanted-lilac-950: #241b2b;
  --color-seedling: #c6cca2;
  --color-seedling-50: #f8fbe5;
  --color-seedling-100: #eff3d9;
  --color-seedling-200: #dce0c2;
  --color-seedling-300: #c6cca2;
  --color-seedling-400: #a5ab84;
  --color-seedling-500: #898e67;
  --color-seedling-600: #6e734c;
  --color-seedling-700: #565b38;
  --color-seedling-800: #434628;
  --color-seedling-900: #32351c;
  --color-seedling-950: #1f210e;
}