Aster to Ethereal Woods color palette

787AA8Aster 292636Midnight Express C9A799Parfait BDD9CDAquatic Edge 416350Ethereal Woods

About this palette

Aster to Ethereal Woods is a 5-color muted palette: #787AA8 (Aster), #292636 (Midnight Express), #C9A799 (Parfait), #BDD9CD (Aquatic Edge), #416350 (Ethereal Woods). It mixes purple, gray, orange, green tones and feels cool overall. The strongest text pairing is #292636 on #BDD9CD with a contrast ratio of 9.81:1, and 2 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Aster	rgb(120, 122, 168)	hsl(237, 22%, 56%)
Midnight Express	rgb(41, 38, 54)	hsl(251, 17%, 18%)
Parfait	rgb(201, 167, 153)	hsl(18, 31%, 69%)
Aquatic Edge	rgb(189, 217, 205)	hsl(154, 27%, 80%)
Ethereal Woods	rgb(65, 99, 80)	hsl(146, 21%, 32%)

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.81:1 Very good#292636 on #BDD9CD
Aa9.81:1 Very good#BDD9CD on #292636
Aa6.65:1 Good#292636 on #C9A799
Aa6.65:1 Good#C9A799 on #292636
Aa4.47:1 Poor#BDD9CD on #416350
Aa4.47:1 Poor#416350 on #BDD9CD
Aa3.61:1 Poor#787AA8 on #292636
Aa3.61:1 Poor#292636 on #787AA8

Color blindness preview

CSS variables

/* Aster to Ethereal Woods — https://swatchly.xyz/palette/787aa8-292636-c9a799-bdd9cd-416350 */
:root {
  --aster: #787aa8;
  --midnight-express: #292636;
  --parfait: #c9a799;
  --aquatic-edge: #bdd9cd;
  --ethereal-woods: #416350;
}

Tailwind CSS v4

/* Aster to Ethereal Woods — https://swatchly.xyz/palette/787aa8-292636-c9a799-bdd9cd-416350 */
@theme {
  --color-aster: #787aa8;
  --color-aster-50: #f2f3ff;
  --color-aster-100: #e4e6ff;
  --color-aster-200: #cdd0f7;
  --color-aster-300: #b5b8e3;
  --color-aster-400: #9497c5;
  --color-aster-500: #787aa8;
  --color-aster-600: #60618c;
  --color-aster-700: #4b4c73;
  --color-aster-800: #3a3b5d;
  --color-aster-900: #2d2d4a;
  --color-aster-950: #1b1c30;
  --color-midnight-express: #292636;
  --color-midnight-express-50: #f5f3ff;
  --color-midnight-express-100: #ebe9f7;
  --color-midnight-express-200: #d8d5e5;
  --color-midnight-express-300: #c1bed0;
  --color-midnight-express-400: #a29fb2;
  --color-midnight-express-500: #888599;
  --color-midnight-express-600: #706d7f;
  --color-midnight-express-700: #5b5869;
  --color-midnight-express-800: #4a4756;
  --color-midnight-express-900: #3b3947;
  --color-midnight-express-950: #292636;
  --color-parfait: #c9a799;
  --color-parfait-50: #fff9f6;
  --color-parfait-100: #ffefe8;
  --color-parfait-200: #f4dbd1;
  --color-parfait-300: #e2c6bb;
  --color-parfait-400: #c9a799;
  --color-parfait-500: #aa897c;
  --color-parfait-600: #8c6c60;
  --color-parfait-700: #705448;
  --color-parfait-800: #584036;
  --color-parfait-900: #442f27;
  --color-parfait-950: #2a1b15;
  --color-aquatic-edge: #bdd9cd;
  --color-aquatic-edge-50: #e5f5ee;
  --color-aquatic-edge-100: #d9ebe3;
  --color-aquatic-edge-200: #bdd9cd;
  --color-aquatic-edge-300: #aac2b8;
  --color-aquatic-edge-400: #8ba59a;
  --color-aquatic-edge-500: #708a7f;
  --color-aquatic-edge-600: #587066;
  --color-aquatic-edge-700: #445a51;
  --color-aquatic-edge-800: #34473f;
  --color-aquatic-edge-900: #263730;
  --color-aquatic-edge-950: #16221d;
  --color-ethereal-woods: #416350;
  --color-ethereal-woods-50: #e6fbef;
  --color-ethereal-woods-100: #dbf2e4;
  --color-ethereal-woods-200: #c5e0d0;
  --color-ethereal-woods-300: #acccb9;
  --color-ethereal-woods-400: #8bae9a;
  --color-ethereal-woods-500: #70937f;
  --color-ethereal-woods-600: #577966;
  --color-ethereal-woods-700: #416350;
  --color-ethereal-woods-800: #314e3e;
  --color-ethereal-woods-900: #243c2f;
  --color-ethereal-woods-950: #14261c;
}