Midnight Masquerade to Cabbage color palette

2A2D4BMidnight Masquerade 645400Ayahuasca Vine AB4C90Purple Zergling AFA619Honey and Thyme 80D4B6Cabbage

Open in generator Export PNG, PDF, ASE…

About this palette

Midnight Masquerade to Cabbage is a 5-color warm palette: #2A2D4B (Midnight Masquerade), #645400 (Ayahuasca Vine), #AB4C90 (Purple Zergling), #AFA619 (Honey and Thyme), #80D4B6 (Cabbage). It mixes purple, brown, pink, yellow, turquoise tones and feels warm overall. The strongest text pairing is #2A2D4B on #80D4B6 with a contrast ratio of 7.62:1, and 2 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Midnight Masquerade	rgb(42, 45, 75)	hsl(235, 28%, 23%)
Ayahuasca Vine	rgb(100, 84, 0)	hsl(50, 100%, 20%)
Purple Zergling	rgb(171, 76, 144)	hsl(317, 38%, 48%)
Honey and Thyme	rgb(175, 166, 25)	hsl(56, 75%, 39%)
Cabbage	rgb(128, 212, 182)	hsl(159, 49%, 67%)

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.

Aa7.62:1 Very good#2A2D4B on #80D4B6
Aa7.62:1 Very good#80D4B6 on #2A2D4B
Aa5.26:1 Good#2A2D4B on #AFA619
Aa5.26:1 Good#AFA619 on #2A2D4B
Aa4.27:1 Poor#645400 on #80D4B6
Aa4.27:1 Poor#80D4B6 on #645400

Color blindness preview

CSS variables

/* Midnight Masquerade to Cabbage — https://swatchly.xyz/palette/2a2d4b-645400-ab4c90-afa619-80d4b6 */
:root {
  --midnight-masquerade: #2a2d4b;
  --ayahuasca-vine: #645400;
  --purple-zergling: #ab4c90;
  --honey-and-thyme: #afa619;
  --cabbage: #80d4b6;
}

Tailwind CSS v4

/* Midnight Masquerade to Cabbage — https://swatchly.xyz/palette/2a2d4b-645400-ab4c90-afa619-80d4b6 */
@theme {
  --color-midnight-masquerade: #2a2d4b;
  --color-midnight-masquerade-50: #f3f4ff;
  --color-midnight-masquerade-100: #e6eaff;
  --color-midnight-masquerade-200: #d1d5f2;
  --color-midnight-masquerade-300: #babfdf;
  --color-midnight-masquerade-400: #999ec2;
  --color-midnight-masquerade-500: #7d82a6;
  --color-midnight-masquerade-600: #636789;
  --color-midnight-masquerade-700: #4d516f;
  --color-midnight-masquerade-800: #3a3e58;
  --color-midnight-masquerade-900: #2a2d4b;
  --color-midnight-masquerade-950: #1a1c2b;
  --color-ayahuasca-vine: #645400;
  --color-ayahuasca-vine-50: #fff6d0;
  --color-ayahuasca-vine-100: #f6ecc1;
  --color-ayahuasca-vine-200: #e4d8a5;
  --color-ayahuasca-vine-300: #cfc186;
  --color-ayahuasca-vine-400: #b1a15f;
  --color-ayahuasca-vine-500: #968640;
  --color-ayahuasca-vine-600: #7b6b25;
  --color-ayahuasca-vine-700: #645400;
  --color-ayahuasca-vine-800: #4e4101;
  --color-ayahuasca-vine-900: #3c3200;
  --color-ayahuasca-vine-950: #261f00;
  --color-purple-zergling: #ab4c90;
  --color-purple-zergling-50: #fff0f9;
  --color-purple-zergling-100: #ffe4f5;
  --color-purple-zergling-200: #ffc7eb;
  --color-purple-zergling-300: #fba6df;
  --color-purple-zergling-400: #e183c4;
  --color-purple-zergling-500: #c766aa;
  --color-purple-zergling-600: #ab4c90;
  --color-purple-zergling-700: #8d3575;
  --color-purple-zergling-800: #72245d;
  --color-purple-zergling-900: #5a1749;
  --color-purple-zergling-950: #3b0a2f;
  --color-honey-and-thyme: #afa619;
  --color-honey-and-thyme-50: #fcf9bb;
  --color-honey-and-thyme-100: #f3f0a9;
  --color-honey-and-thyme-200: #e1dc86;
  --color-honey-and-thyme-300: #ccc660;
  --color-honey-and-thyme-400: #afa619;
  --color-honey-and-thyme-500: #928a00;
  --color-honey-and-thyme-600: #766f00;
  --color-honey-and-thyme-700: #5d5800;
  --color-honey-and-thyme-800: #494400;
  --color-honey-and-thyme-900: #383400;
  --color-honey-and-thyme-950: #232000;
  --color-cabbage: #80d4b6;
  --color-cabbage-50: #d9fff0;
  --color-cabbage-100: #c6f8e4;
  --color-cabbage-200: #aae6cf;
  --color-cabbage-300: #80d4b6;
  --color-cabbage-400: #63b397;
  --color-cabbage-500: #43987c;
  --color-cabbage-600: #257c62;
  --color-cabbage-700: #0b644d;
  --color-cabbage-800: #004f3b;
  --color-cabbage-900: #003d2d;
  --color-cabbage-950: #00261b;
}