Mystery Mint to Black Cherry Color Palette

About this palette

Mystery Mint to Black Cherry is a 5-color cool, vintage palette: #C2F2D4 (Mystery Mint), #976282 (Fruit of Passion), #165E4B (Evergreen), #00C79D (Macau), #321929 (Black Cherry). It mixes green, red, turquoise tones and feels cool overall. The strongest text pairing is #C2F2D4 on #321929 with a contrast ratio of 12.97:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Mystery Mint	rgb(194, 242, 212)	hsl(143, 65%, 85%)
Fruit of Passion	rgb(151, 98, 130)	hsl(324, 21%, 49%)
Evergreen	rgb(22, 94, 75)	hsl(164, 62%, 23%)
Macau	rgb(0, 199, 157)	hsl(167, 100%, 39%)
Black Cherry	rgb(50, 25, 41)	hsl(322, 33%, 15%)

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.97:1 Super#C2F2D4 on #321929
Aa12.97:1 Super#321929 on #C2F2D4
Aa7.39:1 Very good#00C79D on #321929
Aa7.39:1 Very good#321929 on #00C79D
Aa6.19:1 Good#C2F2D4 on #165E4B
Aa6.19:1 Good#165E4B on #C2F2D4
Aa3.86:1 Poor#C2F2D4 on #976282
Aa3.86:1 Poor#976282 on #C2F2D4

Color blindness preview

CSS variables

/* Mystery Mint to Black Cherry — https://swatchly.xyz/palette/c2f2d4-976282-165e4b-00c79d-321929 */
:root {
  --mystery-mint: #c2f2d4;
  --fruit-of-passion: #976282;
  --evergreen: #165e4b;
  --macau: #00c79d;
  --black-cherry: #321929;
}

Tailwind CSS v4

/* Mystery Mint to Black Cherry — https://swatchly.xyz/palette/c2f2d4-976282-165e4b-00c79d-321929 */
@theme {
  --color-mystery-mint: #c2f2d4;
  --color-mystery-mint-50: #dcf8e6;
  --color-mystery-mint-100: #c2f2d4;
  --color-mystery-mint-200: #b8dcc5;
  --color-mystery-mint-300: #a0c8af;
  --color-mystery-mint-400: #7eaa8f;
  --color-mystery-mint-500: #639075;
  --color-mystery-mint-600: #4b765d;
  --color-mystery-mint-700: #385f48;
  --color-mystery-mint-800: #284b37;
  --color-mystery-mint-900: #1c3a29;
  --color-mystery-mint-950: #0f2418;
  --color-fruit-of-passion: #976282;
  --color-fruit-of-passion-50: #fff0f8;
  --color-fruit-of-passion-100: #ffe4f3;
  --color-fruit-of-passion-200: #f8cce5;
  --color-fruit-of-passion-300: #e6b5d2;
  --color-fruit-of-passion-400: #cb96b5;
  --color-fruit-of-passion-500: #b17b9b;
  --color-fruit-of-passion-600: #976282;
  --color-fruit-of-passion-700: #7b4b68;
  --color-fruit-of-passion-800: #633852;
  --color-fruit-of-passion-900: #4d2940;
  --color-fruit-of-passion-950: #321828;
  --color-evergreen: #165e4b;
  --color-evergreen-50: #dafff1;
  --color-evergreen-100: #cdf6e7;
  --color-evergreen-200: #b2e3d2;
  --color-evergreen-300: #94cdb9;
  --color-evergreen-400: #6eae99;
  --color-evergreen-500: #4f927d;
  --color-evergreen-600: #347662;
  --color-evergreen-700: #165e4b;
  --color-evergreen-800: #12493a;
  --color-evergreen-900: #09392c;
  --color-evergreen-950: #03241b;
  --color-macau: #00c79d;
  --color-macau-50: #e6fff5;
  --color-macau-100: #c4ffe9;
  --color-macau-200: #94f4d4;
  --color-macau-300: #6de2bd;
  --color-macau-400: #00c79d;
  --color-macau-500: #00a582;
  --color-macau-600: #008568;
  --color-macau-700: #006952;
  --color-macau-800: #00523f;
  --color-macau-900: #003e2f;
  --color-macau-950: #00261c;
  --color-black-cherry: #321929;
  --color-black-cherry-50: #fff0f9;
  --color-black-cherry-100: #fae4f1;
  --color-black-cherry-200: #e9cfde;
  --color-black-cherry-300: #d4b7c8;
  --color-black-cherry-400: #b697a9;
  --color-black-cherry-500: #9c7c8f;
  --color-black-cherry-600: #816375;
  --color-black-cherry-700: #694e5e;
  --color-black-cherry-800: #543c4b;
  --color-black-cherry-900: #432f3b;
  --color-black-cherry-950: #321929;
}