Pastel Day to Witches Cauldron color palette

E0D5EBPastel Day B4A9CCLucius Lilac 9387A6Hatoba Pigeon 7A6F89Nymph’s Delight 5A546CMajestic Magic 36303DWitches Cauldron

Open in generator Export PNG, PDF, ASE…

About this palette

Pastel Day to Witches Cauldron is a 6-color muted, cool, gradient palette: #E0D5EB (Pastel Day), #B4A9CC (Lucius Lilac), #9387A6 (Hatoba Pigeon), #7A6F89 (Nymph’s Delight), #5A546C (Majestic Magic), #36303D (Witches Cauldron). It mixes gray, purple tones and feels cool overall. The strongest text pairing is #E0D5EB on #36303D with a contrast ratio of 9.04:1, and 3 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Pastel Day	rgb(224, 213, 235)	hsl(270, 35%, 88%)
Lucius Lilac	rgb(180, 169, 204)	hsl(259, 26%, 73%)
Hatoba Pigeon	rgb(147, 135, 166)	hsl(263, 15%, 59%)
Nymph’s Delight	rgb(122, 111, 137)	hsl(265, 10%, 49%)
Majestic Magic	rgb(90, 84, 108)	hsl(255, 12%, 38%)
Witches Cauldron	rgb(54, 48, 61)	hsl(268, 12%, 21%)

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.

Aa9.04:1 Very good#E0D5EB on #36303D
Aa9.04:1 Very good#36303D on #E0D5EB
Aa5.76:1 Good#B4A9CC on #36303D
Aa5.76:1 Good#36303D on #B4A9CC
Aa5.10:1 Good#E0D5EB on #5A546C
Aa5.10:1 Good#5A546C on #E0D5EB
Aa3.80:1 Poor#9387A6 on #36303D
Aa3.80:1 Poor#36303D on #9387A6

Color blindness preview

CSS variables

/* Pastel Day to Witches Cauldron — https://swatchly.xyz/palette/e0d5eb-b4a9cc-9387a6-7a6f89-5a546c-36303d */
:root {
  --pastel-day: #e0d5eb;
  --lucius-lilac: #b4a9cc;
  --hatoba-pigeon: #9387a6;
  --nymph-s-delight: #7a6f89;
  --majestic-magic: #5a546c;
  --witches-cauldron: #36303d;
}

Tailwind CSS v4

/* Pastel Day to Witches Cauldron — https://swatchly.xyz/palette/e0d5eb-b4a9cc-9387a6-7a6f89-5a546c-36303d */
@theme {
  --color-pastel-day: #e0d5eb;
  --color-pastel-day-50: #faf4ff;
  --color-pastel-day-100: #f1eaf8;
  --color-pastel-day-200: #e0d5eb;
  --color-pastel-day-300: #c8bfd1;
  --color-pastel-day-400: #a89eb2;
  --color-pastel-day-500: #8d8397;
  --color-pastel-day-600: #72687b;
  --color-pastel-day-700: #5a5163;
  --color-pastel-day-800: #463f4e;
  --color-pastel-day-900: #36303c;
  --color-pastel-day-950: #221d26;
  --color-lucius-lilac: #b4a9cc;
  --color-lucius-lilac-50: #fbf9ff;
  --color-lucius-lilac-100: #f4f0ff;
  --color-lucius-lilac-200: #e4ddf6;
  --color-lucius-lilac-300: #d1c8e4;
  --color-lucius-lilac-400: #b4a9cc;
  --color-lucius-lilac-500: #968bad;
  --color-lucius-lilac-600: #796e8f;
  --color-lucius-lilac-700: #5f5673;
  --color-lucius-lilac-800: #4a415b;
  --color-lucius-lilac-900: #383046;
  --color-lucius-lilac-950: #211c2b;
  --color-hatoba-pigeon: #9387a6;
  --color-hatoba-pigeon-50: #f8f4ff;
  --color-hatoba-pigeon-100: #f1eafe;
  --color-hatoba-pigeon-200: #e0d7ef;
  --color-hatoba-pigeon-300: #cbc1dc;
  --color-hatoba-pigeon-400: #ada2c0;
  --color-hatoba-pigeon-500: #9387a6;
  --color-hatoba-pigeon-600: #776b89;
  --color-hatoba-pigeon-700: #5f546f;
  --color-hatoba-pigeon-800: #4a4058;
  --color-hatoba-pigeon-900: #383144;
  --color-hatoba-pigeon-950: #231d2b;
  --color-nymph-s-delight: #7a6f89;
  --color-nymph-s-delight-50: #f8f2ff;
  --color-nymph-s-delight-100: #f0e9fb;
  --color-nymph-s-delight-200: #dfd6eb;
  --color-nymph-s-delight-300: #cbc1d9;
  --color-nymph-s-delight-400: #ada2bc;
  --color-nymph-s-delight-500: #9388a3;
  --color-nymph-s-delight-600: #7a6f89;
  --color-nymph-s-delight-700: #61576f;
  --color-nymph-s-delight-800: #4c4358;
  --color-nymph-s-delight-900: #3a3344;
  --color-nymph-s-delight-950: #241f2b;
  --color-majestic-magic: #5a546c;
  --color-majestic-magic-50: #f6f3ff;
  --color-majestic-magic-100: #ece8fa;
  --color-majestic-magic-200: #d9d5e9;
  --color-majestic-magic-300: #c4bed6;
  --color-majestic-magic-400: #a59fb8;
  --color-majestic-magic-500: #8a849e;
  --color-majestic-magic-600: #706a83;
  --color-majestic-magic-700: #5a546c;
  --color-majestic-magic-800: #464155;
  --color-majestic-magic-900: #363242;
  --color-majestic-magic-950: #211e2a;
  --color-witches-cauldron: #36303d;
  --color-witches-cauldron-50: #f7f3fc;
  --color-witches-cauldron-100: #ede9f3;
  --color-witches-cauldron-200: #dad5e1;
  --color-witches-cauldron-300: #c4becc;
  --color-witches-cauldron-400: #a59ead;
  --color-witches-cauldron-500: #8a8392;
  --color-witches-cauldron-600: #6f6977;
  --color-witches-cauldron-700: #585260;
  --color-witches-cauldron-800: #45404b;
  --color-witches-cauldron-900: #36303d;
  --color-witches-cauldron-950: #211e25;
}