Pastel Day to Underworld color palette

DDD5E1Pastel Day B8A6C0Novel Lilac 946B72Fruit of Passion 42564BPlantation 192420Underworld

About this palette

Pastel Day to Underworld is a 5-color muted, gradient palette: #DDD5E1 (Pastel Day), #B8A6C0 (Novel Lilac), #946B72 (Fruit of Passion), #42564B (Plantation), #192420 (Underworld). It mixes gray, purple, red tones and feels balanced overall. The strongest text pairing is #DDD5E1 on #192420 with a contrast ratio of 11.17:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Pastel Day	rgb(221, 213, 225)	hsl(280, 17%, 86%)
Novel Lilac	rgb(184, 166, 192)	hsl(282, 17%, 70%)
Fruit of Passion	rgb(148, 107, 114)	hsl(350, 16%, 50%)
Plantation	rgb(66, 86, 75)	hsl(147, 13%, 30%)
Underworld	rgb(25, 36, 32)	hsl(158, 18%, 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.17:1 Very good#DDD5E1 on #192420
Aa11.17:1 Very good#192420 on #DDD5E1
Aa7.04:1 Very good#B8A6C0 on #192420
Aa7.04:1 Very good#192420 on #B8A6C0
Aa5.51:1 Good#DDD5E1 on #42564B
Aa5.51:1 Good#42564B on #DDD5E1
Aa3.50:1 Poor#946B72 on #192420
Aa3.50:1 Poor#192420 on #946B72

Color blindness preview

CSS variables

/* Pastel Day to Underworld — https://swatchly.xyz/palette/ddd5e1-b8a6c0-946b72-42564b-192420 */
:root {
  --pastel-day: #ddd5e1;
  --novel-lilac: #b8a6c0;
  --fruit-of-passion: #946b72;
  --plantation: #42564b;
  --underworld: #192420;
}

Tailwind CSS v4

/* Pastel Day to Underworld — https://swatchly.xyz/palette/ddd5e1-b8a6c0-946b72-42564b-192420 */
@theme {
  --color-pastel-day: #ddd5e1;
  --color-pastel-day-50: #f8f4fb;
  --color-pastel-day-100: #efeaf1;
  --color-pastel-day-200: #ddd5e1;
  --color-pastel-day-300: #c5bfc9;
  --color-pastel-day-400: #a69faa;
  --color-pastel-day-500: #8b838e;
  --color-pastel-day-600: #706973;
  --color-pastel-day-700: #59535c;
  --color-pastel-day-800: #454048;
  --color-pastel-day-900: #353138;
  --color-pastel-day-950: #211e23;
  --color-novel-lilac: #b8a6c0;
  --color-novel-lilac-50: #fdf7ff;
  --color-novel-lilac-100: #f8edfd;
  --color-novel-lilac-200: #e8dbed;
  --color-novel-lilac-300: #d4c5db;
  --color-novel-lilac-400: #b8a6c0;
  --color-novel-lilac-500: #9a89a1;
  --color-novel-lilac-600: #7d6c84;
  --color-novel-lilac-700: #63546a;
  --color-novel-lilac-800: #4d4053;
  --color-novel-lilac-900: #3b3040;
  --color-novel-lilac-950: #241c27;
  --color-fruit-of-passion: #946b72;
  --color-fruit-of-passion-50: #fff1f3;
  --color-fruit-of-passion-100: #ffe6ea;
  --color-fruit-of-passion-200: #f4d2d7;
  --color-fruit-of-passion-300: #e2bcc2;
  --color-fruit-of-passion-400: #c79ea4;
  --color-fruit-of-passion-500: #ae848b;
  --color-fruit-of-passion-600: #946b72;
  --color-fruit-of-passion-700: #78535a;
  --color-fruit-of-passion-800: #603f45;
  --color-fruit-of-passion-900: #4b2f34;
  --color-fruit-of-passion-950: #301c20;
  --color-plantation: #42564b;
  --color-plantation-50: #ecf9f1;
  --color-plantation-100: #e1efe7;
  --color-plantation-200: #cadbd2;
  --color-plantation-300: #b1c5b9;
  --color-plantation-400: #90a599;
  --color-plantation-500: #73897d;
  --color-plantation-600: #596d62;
  --color-plantation-700: #42564b;
  --color-plantation-800: #33433a;
  --color-plantation-900: #26342c;
  --color-plantation-950: #16201b;
  --color-underworld: #192420;
  --color-underworld-50: #eff7f4;
  --color-underworld-100: #e5eeea;
  --color-underworld-200: #d0dad6;
  --color-underworld-300: #b8c4bf;
  --color-underworld-400: #98a5a0;
  --color-underworld-500: #7d8a85;
  --color-underworld-600: #63706b;
  --color-underworld-700: #4e5955;
  --color-underworld-800: #3c4643;
  --color-underworld-900: #2e3734;
  --color-underworld-950: #192420;
}