Midnight Masquerade to Herbal Vapours Color Palette

About this palette

Midnight Masquerade to Herbal Vapours is a 4-color cool palette: #282C48 (Midnight Masquerade), #91517C (Grape Candy), #97B13C (Limolicious), #DCF8BF (Herbal Vapours). It mixes purple, red, green tones and feels cool overall. The strongest text pairing is #282C48 on #DCF8BF with a contrast ratio of 11.80:1, and 3 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Midnight Masquerade	rgb(40, 44, 72)	hsl(232, 29%, 22%)
Grape Candy	rgb(145, 81, 124)	hsl(320, 28%, 44%)
Limolicious	rgb(151, 177, 60)	hsl(73, 49%, 46%)
Herbal Vapours	rgb(220, 248, 191)	hsl(89, 80%, 86%)

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.80:1 Very good#282C48 on #DCF8BF
Aa11.80:1 Very good#DCF8BF on #282C48
Aa5.62:1 Good#282C48 on #97B13C
Aa5.62:1 Good#97B13C on #282C48
Aa4.96:1 Good#91517C on #DCF8BF
Aa4.96:1 Good#DCF8BF on #91517C

Color blindness preview

CSS variables

/* Midnight Masquerade to Herbal Vapours — https://swatchly.xyz/palette/282c48-91517c-97b13c-dcf8bf */
:root {
  --midnight-masquerade: #282c48;
  --grape-candy: #91517c;
  --limolicious: #97b13c;
  --herbal-vapours: #dcf8bf;
}

Tailwind CSS v4

/* Midnight Masquerade to Herbal Vapours — https://swatchly.xyz/palette/282c48-91517c-97b13c-dcf8bf */
@theme {
  --color-midnight-masquerade: #282c48;
  --color-midnight-masquerade-50: #f2f4ff;
  --color-midnight-masquerade-100: #e6eaff;
  --color-midnight-masquerade-200: #d1d6f1;
  --color-midnight-masquerade-300: #b9bfde;
  --color-midnight-masquerade-400: #989ec0;
  --color-midnight-masquerade-500: #7c82a3;
  --color-midnight-masquerade-600: #626786;
  --color-midnight-masquerade-700: #4b506c;
  --color-midnight-masquerade-800: #393d55;
  --color-midnight-masquerade-900: #282c48;
  --color-midnight-masquerade-950: #191b29;
  --color-grape-candy: #91517c;
  --color-grape-candy-50: #fff0f9;
  --color-grape-candy-100: #ffe1f3;
  --color-grape-candy-200: #fac4e6;
  --color-grape-candy-300: #e7aad1;
  --color-grape-candy-400: #ca88b3;
  --color-grape-candy-500: #ae6b97;
  --color-grape-candy-600: #91517c;
  --color-grape-candy-700: #763d64;
  --color-grape-candy-800: #5f2d4f;
  --color-grape-candy-900: #4b213e;
  --color-grape-candy-950: #301227;
  --color-limolicious: #97b13c;
  --color-limolicious-50: #eeffc4;
  --color-limolicious-100: #e3f6b4;
  --color-limolicious-200: #cfe494;
  --color-limolicious-300: #b7cf72;
  --color-limolicious-400: #97b13c;
  --color-limolicious-500: #7c9414;
  --color-limolicious-600: #637800;
  --color-limolicious-700: #4e5f00;
  --color-limolicious-800: #3c4a00;
  --color-limolicious-900: #2e3900;
  --color-limolicious-950: #1b2300;
  --color-herbal-vapours: #dcf8bf;
  --color-herbal-vapours-50: #edfdde;
  --color-herbal-vapours-100: #dcf8bf;
  --color-herbal-vapours-200: #cde1b8;
  --color-herbal-vapours-300: #b4cb9c;
  --color-herbal-vapours-400: #93ac79;
  --color-herbal-vapours-500: #77905c;
  --color-herbal-vapours-600: #5e7543;
  --color-herbal-vapours-700: #485d2f;
  --color-herbal-vapours-800: #374921;
  --color-herbal-vapours-900: #293916;
  --color-herbal-vapours-950: #18230a;
}