Black Cherry to Spearmint Color Palette

About this palette

Black Cherry to Spearmint is a 5-color cool, vintage palette: #2E1525 (Black Cherry), #A55389 (Purple Zergling), #6B406A (Majesty), #9ED8A1 (Jovial Jade), #66BB96 (Spearmint). It mixes red, purple, green tones and feels cool overall. The strongest text pairing is #2E1525 on #9ED8A1 with a contrast ratio of 10.23:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Black Cherry	rgb(46, 21, 37)	hsl(322, 37%, 13%)
Purple Zergling	rgb(165, 83, 137)	hsl(320, 33%, 49%)
Majesty	rgb(107, 64, 106)	hsl(301, 25%, 34%)
Jovial Jade	rgb(158, 216, 161)	hsl(123, 43%, 73%)
Spearmint	rgb(102, 187, 150)	hsl(154, 38%, 57%)

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.

Aa10.23:1 Very good#2E1525 on #9ED8A1
Aa10.23:1 Very good#9ED8A1 on #2E1525
Aa7.29:1 Very good#2E1525 on #66BB96
Aa7.29:1 Very good#66BB96 on #2E1525
Aa4.98:1 Good#6B406A on #9ED8A1
Aa4.98:1 Good#9ED8A1 on #6B406A
Aa3.55:1 Poor#6B406A on #66BB96
Aa3.55:1 Poor#66BB96 on #6B406A

Color blindness preview

CSS variables

/* Black Cherry to Spearmint — https://swatchly.xyz/palette/2e1525-a55389-6b406a-9ed8a1-66bb96 */
:root {
  --black-cherry: #2e1525;
  --purple-zergling: #a55389;
  --majesty: #6b406a;
  --jovial-jade: #9ed8a1;
  --spearmint: #66bb96;
}

Tailwind CSS v4

/* Black Cherry to Spearmint — https://swatchly.xyz/palette/2e1525-a55389-6b406a-9ed8a1-66bb96 */
@theme {
  --color-black-cherry: #2e1525;
  --color-black-cherry-50: #fff0f9;
  --color-black-cherry-100: #fae4f1;
  --color-black-cherry-200: #e9cfde;
  --color-black-cherry-300: #d5b7c8;
  --color-black-cherry-400: #b797a9;
  --color-black-cherry-500: #9b7b8e;
  --color-black-cherry-600: #7f6173;
  --color-black-cherry-700: #674b5c;
  --color-black-cherry-800: #513a48;
  --color-black-cherry-900: #3f2b37;
  --color-black-cherry-950: #2e1525;
  --color-purple-zergling: #a55389;
  --color-purple-zergling-50: #fff0f9;
  --color-purple-zergling-100: #ffe4f4;
  --color-purple-zergling-200: #ffc7e9;
  --color-purple-zergling-300: #f5aad9;
  --color-purple-zergling-400: #db88bd;
  --color-purple-zergling-500: #c16da3;
  --color-purple-zergling-600: #a55389;
  --color-purple-zergling-700: #883d6f;
  --color-purple-zergling-800: #6d2b58;
  --color-purple-zergling-900: #561e44;
  --color-purple-zergling-950: #380f2c;
  --color-majesty: #6b406a;
  --color-majesty-50: #fff0fe;
  --color-majesty-100: #ffe0fd;
  --color-majesty-200: #efc9ed;
  --color-majesty-300: #daafd8;
  --color-majesty-400: #bc8eba;
  --color-majesty-500: #a0719e;
  --color-majesty-600: #835782;
  --color-majesty-700: #6b406a;
  --color-majesty-800: #543253;
  --color-majesty-900: #412541;
  --color-majesty-950: #2a1529;
  --color-jovial-jade: #9ed8a1;
  --color-jovial-jade-50: #eaffea;
  --color-jovial-jade-100: #d8fad9;
  --color-jovial-jade-200: #c0e9c2;
  --color-jovial-jade-300: #9ed8a1;
  --color-jovial-jade-400: #80b683;
  --color-jovial-jade-500: #629966;
  --color-jovial-jade-600: #477d4c;
  --color-jovial-jade-700: #326437;
  --color-jovial-jade-800: #224e27;
  --color-jovial-jade-900: #173c1b;
  --color-jovial-jade-950: #0b260e;
  --color-spearmint: #66bb96;
  --color-spearmint-50: #e3fff1;
  --color-spearmint-100: #cafce3;
  --color-spearmint-200: #b0ebcf;
  --color-spearmint-300: #92d7b7;
  --color-spearmint-400: #66bb96;
  --color-spearmint-500: #489e7a;
  --color-spearmint-600: #29815f;
  --color-spearmint-700: #0e6849;
  --color-spearmint-800: #005138;
  --color-spearmint-900: #003e2a;
  --color-spearmint-950: #002718;
}