Black Cherry to Bavarian Green Color Palette

About this palette

Black Cherry to Bavarian Green is a 4-color cool palette: #29131E (Black Cherry), #453E72 (Meteorite), #BAE1AC (Basil Smash), #6F9456 (Bavarian Green). It mixes red, purple, green tones and feels cool overall. The strongest text pairing is #29131E on #BAE1AC with a contrast ratio of 11.98:1, and 3 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Black Cherry	rgb(41, 19, 30)	hsl(330, 37%, 12%)
Meteorite	rgb(69, 62, 114)	hsl(248, 30%, 35%)
Basil Smash	rgb(186, 225, 172)	hsl(104, 47%, 78%)
Bavarian Green	rgb(111, 148, 86)	hsl(96, 26%, 46%)

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.98:1 Very good#29131E on #BAE1AC
Aa11.98:1 Very good#BAE1AC on #29131E
Aa6.61:1 Good#453E72 on #BAE1AC
Aa6.61:1 Good#BAE1AC on #453E72
Aa5.01:1 Good#29131E on #6F9456
Aa5.01:1 Good#6F9456 on #29131E

Color blindness preview

CSS variables

/* Black Cherry to Bavarian Green — https://swatchly.xyz/palette/29131e-453e72-bae1ac-6f9456 */
:root {
  --black-cherry: #29131e;
  --meteorite: #453e72;
  --basil-smash: #bae1ac;
  --bavarian-green: #6f9456;
}

Tailwind CSS v4

/* Black Cherry to Bavarian Green — https://swatchly.xyz/palette/29131e-453e72-bae1ac-6f9456 */
@theme {
  --color-black-cherry: #29131e;
  --color-black-cherry-50: #fff1f7;
  --color-black-cherry-100: #f9e5ee;
  --color-black-cherry-200: #e8d0da;
  --color-black-cherry-300: #d3b8c4;
  --color-black-cherry-400: #b598a5;
  --color-black-cherry-500: #997c89;
  --color-black-cherry-600: #7c616d;
  --color-black-cherry-700: #634b56;
  --color-black-cherry-800: #4d3842;
  --color-black-cherry-900: #3b2931;
  --color-black-cherry-950: #29131e;
  --color-meteorite: #453e72;
  --color-meteorite-50: #f4f4ff;
  --color-meteorite-100: #eae8ff;
  --color-meteorite-200: #d5d2ff;
  --color-meteorite-300: #bfbbef;
  --color-meteorite-400: #a09bd4;
  --color-meteorite-500: #8680ba;
  --color-meteorite-600: #6c679e;
  --color-meteorite-700: #575184;
  --color-meteorite-800: #453e72;
  --color-meteorite-900: #353056;
  --color-meteorite-950: #211d39;
  --color-basil-smash: #bae1ac;
  --color-basil-smash-50: #e4fbdc;
  --color-basil-smash-100: #d8f1cf;
  --color-basil-smash-200: #bae1ac;
  --color-basil-smash-300: #a8c99c;
  --color-basil-smash-400: #87ab7a;
  --color-basil-smash-500: #6c905f;
  --color-basil-smash-600: #537647;
  --color-basil-smash-700: #405f34;
  --color-basil-smash-800: #304b25;
  --color-basil-smash-900: #233a1a;
  --color-basil-smash-950: #14240d;
  --color-bavarian-green: #6f9456;
  --color-bavarian-green-50: #e7feda;
  --color-bavarian-green-100: #dcf5cc;
  --color-bavarian-green-200: #c5e3b3;
  --color-bavarian-green-300: #acce97;
  --color-bavarian-green-400: #8baf73;
  --color-bavarian-green-500: #6f9456;
  --color-bavarian-green-600: #55793d;
  --color-bavarian-green-700: #416029;
  --color-bavarian-green-800: #304c1b;
  --color-bavarian-green-900: #233b11;
  --color-bavarian-green-950: #142507;
}