Black Cherry to Walkie Chalkie color palette

321923Black Cherry 8E2764Pink Horror B96688Malevolent Mauve EEAAD0Elastic Pink FFF4F8Walkie Chalkie

About this palette

Black Cherry to Walkie Chalkie is a 5-color warm, vintage, monochromatic, gradient palette: #321923 (Black Cherry), #8E2764 (Pink Horror), #B96688 (Malevolent Mauve), #EEAAD0 (Elastic Pink), #FFF4F8 (Walkie Chalkie). It mixes red, pink, white tones and feels warm overall. The strongest text pairing is #321923 on #FFF4F8 with a contrast ratio of 15.05:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Black Cherry	rgb(50, 25, 35)	hsl(336, 33%, 15%)
Pink Horror	rgb(142, 39, 100)	hsl(324, 57%, 35%)
Malevolent Mauve	rgb(185, 102, 136)	hsl(335, 37%, 56%)
Elastic Pink	rgb(238, 170, 208)	hsl(326, 67%, 80%)
Walkie Chalkie	rgb(255, 244, 248)	hsl(338, 100%, 98%)

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.

Aa15.05:1 Super#321923 on #FFF4F8
Aa15.05:1 Super#FFF4F8 on #321923
Aa8.70:1 Very good#321923 on #EEAAD0
Aa8.70:1 Very good#EEAAD0 on #321923
Aa7.45:1 Very good#8E2764 on #FFF4F8
Aa7.45:1 Very good#FFF4F8 on #8E2764
Aa4.30:1 Poor#8E2764 on #EEAAD0
Aa4.30:1 Poor#EEAAD0 on #8E2764

Color blindness preview

CSS variables

/* Black Cherry to Walkie Chalkie — https://swatchly.xyz/palette/321923-8e2764-b96688-eeaad0-fff4f8 */
:root {
  --black-cherry: #321923;
  --pink-horror: #8e2764;
  --malevolent-mauve: #b96688;
  --elastic-pink: #eeaad0;
  --walkie-chalkie: #fff4f8;
}

Tailwind CSS v4

/* Black Cherry to Walkie Chalkie — https://swatchly.xyz/palette/321923-8e2764-b96688-eeaad0-fff4f8 */
@theme {
  --color-black-cherry: #321923;
  --color-black-cherry-50: #fff1f6;
  --color-black-cherry-100: #fbe4ec;
  --color-black-cherry-200: #eacfd8;
  --color-black-cherry-300: #d5b8c2;
  --color-black-cherry-400: #b797a3;
  --color-black-cherry-500: #9c7d88;
  --color-black-cherry-600: #81636e;
  --color-black-cherry-700: #694e58;
  --color-black-cherry-800: #553d45;
  --color-black-cherry-900: #432f36;
  --color-black-cherry-950: #321923;
  --color-pink-horror: #8e2764;
  --color-pink-horror-50: #fff1f7;
  --color-pink-horror-100: #ffe2ef;
  --color-pink-horror-200: #ffc4e0;
  --color-pink-horror-300: #ff9ecf;
  --color-pink-horror-400: #e379b1;
  --color-pink-horror-500: #c65c96;
  --color-pink-horror-600: #a8417b;
  --color-pink-horror-700: #8e2764;
  --color-pink-horror-800: #701d4e;
  --color-pink-horror-900: #59123d;
  --color-pink-horror-950: #3b0726;
  --color-malevolent-mauve: #b96688;
  --color-malevolent-mauve-50: #fff0f5;
  --color-malevolent-mauve-100: #ffe1ec;
  --color-malevolent-mauve-200: #ffc3d9;
  --color-malevolent-mauve-300: #f2a6c3;
  --color-malevolent-mauve-400: #d683a4;
  --color-malevolent-mauve-500: #b96688;
  --color-malevolent-mauve-600: #9b4d6e;
  --color-malevolent-mauve-700: #7f3857;
  --color-malevolent-mauve-800: #672944;
  --color-malevolent-mauve-900: #521d35;
  --color-malevolent-mauve-950: #350f21;
  --color-elastic-pink: #eeaad0;
  --color-elastic-pink-50: #fff1f8;
  --color-elastic-pink-100: #ffe3f2;
  --color-elastic-pink-200: #fac7e3;
  --color-elastic-pink-300: #eeaad0;
  --color-elastic-pink-400: #cb8caf;
  --color-elastic-pink-500: #af7094;
  --color-elastic-pink-600: #925679;
  --color-elastic-pink-700: #774161;
  --color-elastic-pink-800: #5f304c;
  --color-elastic-pink-900: #4b233b;
  --color-elastic-pink-950: #301425;
  --color-walkie-chalkie: #fff4f8;
  --color-walkie-chalkie-50: #fff4f8;
  --color-walkie-chalkie-100: #f2ebed;
  --color-walkie-chalkie-200: #ded6d9;
  --color-walkie-chalkie-300: #c8bfc2;
  --color-walkie-chalkie-400: #a99fa3;
  --color-walkie-chalkie-500: #8d8387;
  --color-walkie-chalkie-600: #72696c;
  --color-walkie-chalkie-700: #5b5356;
  --color-walkie-chalkie-800: #474043;
  --color-walkie-chalkie-900: #373133;
  --color-walkie-chalkie-950: #221e1f;
}