Exhilarating Green to Mosque Color Palette

About this palette

Exhilarating Green to Mosque is a 5-color cool, vintage palette: #8DC383 (Exhilarating Green), #341B29 (Bruised Plum), #A75A8B (Purple Zergling), #DBF0C7 (Green Glint), #005E5A (Mosque). It mixes green, red, turquoise tones and feels cool overall. The strongest text pairing is #341B29 on #DBF0C7 with a contrast ratio of 12.96:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Exhilarating Green	rgb(141, 195, 131)	hsl(111, 35%, 64%)
Bruised Plum	rgb(52, 27, 41)	hsl(326, 32%, 15%)
Purple Zergling	rgb(167, 90, 139)	hsl(322, 30%, 50%)
Green Glint	rgb(219, 240, 199)	hsl(91, 58%, 86%)
Mosque	rgb(0, 94, 90)	hsl(177, 100%, 18%)

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.

Aa12.96:1 Super#341B29 on #DBF0C7
Aa12.96:1 Super#DBF0C7 on #341B29
Aa7.69:1 Very good#8DC383 on #341B29
Aa7.69:1 Very good#341B29 on #8DC383
Aa6.29:1 Good#DBF0C7 on #005E5A
Aa6.29:1 Good#005E5A on #DBF0C7
Aa3.86:1 Poor#A75A8B on #DBF0C7
Aa3.86:1 Poor#DBF0C7 on #A75A8B

Color blindness preview

CSS variables

/* Exhilarating Green to Mosque — https://swatchly.xyz/palette/8dc383-341b29-a75a8b-dbf0c7-005e5a */
:root {
  --exhilarating-green: #8dc383;
  --bruised-plum: #341b29;
  --purple-zergling: #a75a8b;
  --green-glint: #dbf0c7;
  --mosque: #005e5a;
}

Tailwind CSS v4

/* Exhilarating Green to Mosque — https://swatchly.xyz/palette/8dc383-341b29-a75a8b-dbf0c7-005e5a */
@theme {
  --color-exhilarating-green: #8dc383;
  --color-exhilarating-green-50: #d7f9d1;
  --color-exhilarating-green-100: #c8eec0;
  --color-exhilarating-green-200: #add9a5;
  --color-exhilarating-green-300: #8dc383;
  --color-exhilarating-green-400: #72a568;
  --color-exhilarating-green-500: #598c4f;
  --color-exhilarating-green-600: #427339;
  --color-exhilarating-green-700: #315e29;
  --color-exhilarating-green-800: #244b1c;
  --color-exhilarating-green-900: #1a3c13;
  --color-exhilarating-green-950: #0d2608;
  --color-bruised-plum: #341b29;
  --color-bruised-plum-50: #fff0f8;
  --color-bruised-plum-100: #fae4ef;
  --color-bruised-plum-200: #e9cfdc;
  --color-bruised-plum-300: #d4b7c6;
  --color-bruised-plum-400: #b797a7;
  --color-bruised-plum-500: #9c7d8d;
  --color-bruised-plum-600: #826473;
  --color-bruised-plum-700: #6a4f5d;
  --color-bruised-plum-800: #563e4b;
  --color-bruised-plum-900: #45303b;
  --color-bruised-plum-950: #341b29;
  --color-purple-zergling: #a75a8b;
  --color-purple-zergling-50: #fff0f9;
  --color-purple-zergling-100: #ffe5f4;
  --color-purple-zergling-200: #ffcae9;
  --color-purple-zergling-300: #f5afd9;
  --color-purple-zergling-400: #db8ebd;
  --color-purple-zergling-500: #c273a4;
  --color-purple-zergling-600: #a75a8b;
  --color-purple-zergling-700: #894270;
  --color-purple-zergling-800: #6f3059;
  --color-purple-zergling-900: #572245;
  --color-purple-zergling-950: #39122c;
  --color-green-glint: #dbf0c7;
  --color-green-glint-50: #ebf7e0;
  --color-green-glint-100: #dbf0c7;
  --color-green-glint-200: #cbdbbc;
  --color-green-glint-300: #b4c6a3;
  --color-green-glint-400: #94a782;
  --color-green-glint-500: #7a8c67;
  --color-green-glint-600: #60724f;
  --color-green-glint-700: #4b5b3b;
  --color-green-glint-800: #3a482b;
  --color-green-glint-900: #2c371f;
  --color-green-glint-950: #1a2211;
  --color-mosque: #005e5a;
  --color-mosque-50: #d7fffb;
  --color-mosque-100: #c9f6f2;
  --color-mosque-200: #ade3df;
  --color-mosque-300: #8ecdc8;
  --color-mosque-400: #67aea9;
  --color-mosque-500: #47928d;
  --color-mosque-600: #2a7671;
  --color-mosque-700: #005e5a;
  --color-mosque-800: #044946;
  --color-mosque-900: #003936;
  --color-mosque-950: #002322;
}