Pastel Day to Back in Black color palette

DAD8E8Pastel Day A9B1C7Nebulous December 766271Chimaera 413850Call It a Night 77839BTempest 161117Back in Black

Open in generator Export PNG, PDF, ASE…

About this palette

Pastel Day to Back in Black is a 6-color muted palette: #DAD8E8 (Pastel Day), #A9B1C7 (Nebulous December), #766271 (Chimaera), #413850 (Call It a Night), #77839B (Tempest), #161117 (Back in Black). It mixes gray, purple, blue, black tones and feels cool overall. The strongest text pairing is #DAD8E8 on #161117 with a contrast ratio of 13.29:1, and 5 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Pastel Day	rgb(218, 216, 232)	hsl(248, 26%, 88%)
Nebulous December	rgb(169, 177, 199)	hsl(224, 21%, 72%)
Chimaera	rgb(118, 98, 113)	hsl(315, 9%, 42%)
Call It a Night	rgb(65, 56, 80)	hsl(262, 18%, 27%)
Tempest	rgb(119, 131, 155)	hsl(220, 15%, 54%)
Back in Black	rgb(22, 17, 23)	hsl(290, 15%, 8%)

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.

Aa13.29:1 Super#DAD8E8 on #161117
Aa13.29:1 Super#161117 on #DAD8E8
Aa8.70:1 Very good#A9B1C7 on #161117
Aa8.70:1 Very good#161117 on #A9B1C7
Aa7.85:1 Very good#DAD8E8 on #413850
Aa7.85:1 Very good#413850 on #DAD8E8
Aa5.14:1 Good#A9B1C7 on #413850
Aa5.14:1 Good#413850 on #A9B1C7

Color blindness preview

CSS variables

/* Pastel Day to Back in Black — https://swatchly.xyz/palette/dad8e8-a9b1c7-766271-413850-77839b-161117 */
:root {
  --pastel-day: #dad8e8;
  --nebulous-december: #a9b1c7;
  --chimaera: #766271;
  --call-it-a-night: #413850;
  --tempest: #77839b;
  --back-in-black: #161117;
}

Tailwind CSS v4

/* Pastel Day to Back in Black — https://swatchly.xyz/palette/dad8e8-a9b1c7-766271-413850-77839b-161117 */
@theme {
  --color-pastel-day: #dad8e8;
  --color-pastel-day-50: #f7f6ff;
  --color-pastel-day-100: #edecf6;
  --color-pastel-day-200: #dad8e8;
  --color-pastel-day-300: #c3c1cf;
  --color-pastel-day-400: #a3a1b0;
  --color-pastel-day-500: #878594;
  --color-pastel-day-600: #6c6b78;
  --color-pastel-day-700: #565460;
  --color-pastel-day-800: #42414c;
  --color-pastel-day-900: #33313b;
  --color-pastel-day-950: #1f1e25;
  --color-nebulous-december: #a9b1c7;
  --color-nebulous-december-50: #e8edfb;
  --color-nebulous-december-100: #dae0f0;
  --color-nebulous-december-200: #c3cadc;
  --color-nebulous-december-300: #a9b1c7;
  --color-nebulous-december-400: #8d95aa;
  --color-nebulous-december-500: #757c91;
  --color-nebulous-december-600: #5d6478;
  --color-nebulous-december-700: #4a5062;
  --color-nebulous-december-800: #3a404f;
  --color-nebulous-december-900: #2e3240;
  --color-nebulous-december-950: #1c1f28;
  --color-chimaera: #766271;
  --color-chimaera-50: #fef1fa;
  --color-chimaera-100: #f4e6f0;
  --color-chimaera-200: #e2d1dd;
  --color-chimaera-300: #ccb9c7;
  --color-chimaera-400: #ad98a8;
  --color-chimaera-500: #917c8c;
  --color-chimaera-600: #766271;
  --color-chimaera-700: #5e4d5a;
  --color-chimaera-800: #4a3b47;
  --color-chimaera-900: #3a2d37;
  --color-chimaera-950: #241b22;
  --color-call-it-a-night: #413850;
  --color-call-it-a-night-50: #f7f3ff;
  --color-call-it-a-night-100: #eee7fa;
  --color-call-it-a-night-200: #dbd3e9;
  --color-call-it-a-night-300: #c4bbd4;
  --color-call-it-a-night-400: #a49ab5;
  --color-call-it-a-night-500: #877e99;
  --color-call-it-a-night-600: #6c637c;
  --color-call-it-a-night-700: #544c63;
  --color-call-it-a-night-800: #413850;
  --color-call-it-a-night-900: #312b3c;
  --color-call-it-a-night-950: #1e1a25;
  --color-tempest: #77839b;
  --color-tempest-50: #eff5ff;
  --color-tempest-100: #e2eafb;
  --color-tempest-200: #ccd6ea;
  --color-tempest-300: #b4bfd5;
  --color-tempest-400: #939fb7;
  --color-tempest-500: #77839b;
  --color-tempest-600: #5e6980;
  --color-tempest-700: #495368;
  --color-tempest-800: #384153;
  --color-tempest-900: #2a3241;
  --color-tempest-950: #191f2a;
  --color-back-in-black: #161117;
  --color-back-in-black-50: #f8f3f8;
  --color-back-in-black-100: #eee9ef;
  --color-back-in-black-200: #dbd5dc;
  --color-back-in-black-300: #c5bec6;
  --color-back-in-black-400: #a69fa7;
  --color-back-in-black-500: #888189;
  --color-back-in-black-600: #6a646c;
  --color-back-in-black-700: #514c52;
  --color-back-in-black-800: #3c373d;
  --color-back-in-black-900: #2a262b;
  --color-back-in-black-950: #161117;
}