Peppermint to Dark Prom Queen Color Palette

About this palette

Peppermint to Dark Prom Queen is a 4-color cool palette: #D5E7CA (Peppermint), #BE93DA (Dreamy Candy Forest), #477125 (Botanical), #221427 (Dark Prom Queen). It mixes green, purple tones and feels cool overall. The strongest text pairing is #D5E7CA on #221427 with a contrast ratio of 13.46:1, and 2 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Peppermint	rgb(213, 231, 202)	hsl(97, 38%, 85%)
Dreamy Candy Forest	rgb(190, 147, 218)	hsl(276, 49%, 72%)
Botanical	rgb(71, 113, 37)	hsl(93, 51%, 29%)
Dark Prom Queen	rgb(34, 20, 39)	hsl(284, 32%, 12%)

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.

Aa13.46:1 Super#D5E7CA on #221427
Aa13.46:1 Super#221427 on #D5E7CA
Aa6.99:1 Good#BE93DA on #221427
Aa6.99:1 Good#221427 on #BE93DA
Aa4.41:1 Poor#D5E7CA on #477125
Aa4.41:1 Poor#477125 on #D5E7CA
Aa3.05:1 Poor#477125 on #221427
Aa3.05:1 Poor#221427 on #477125

Color blindness preview

CSS variables

/* Peppermint to Dark Prom Queen — https://swatchly.xyz/palette/d5e7ca-be93da-477125-221427 */
:root {
  --peppermint: #d5e7ca;
  --dreamy-candy-forest: #be93da;
  --botanical: #477125;
  --dark-prom-queen: #221427;
}

Tailwind CSS v4

/* Peppermint to Dark Prom Queen — https://swatchly.xyz/palette/d5e7ca-be93da-477125-221427 */
@theme {
  --color-peppermint: #d5e7ca;
  --color-peppermint-50: #f5fff0;
  --color-peppermint-100: #ecf6e6;
  --color-peppermint-200: #d5e7ca;
  --color-peppermint-300: #bfcdb6;
  --color-peppermint-400: #9dad93;
  --color-peppermint-500: #809076;
  --color-peppermint-600: #65745b;
  --color-peppermint-700: #4e5c45;
  --color-peppermint-800: #3b4733;
  --color-peppermint-900: #2c3726;
  --color-peppermint-950: #1b2216;
  --color-dreamy-candy-forest: #be93da;
  --color-dreamy-candy-forest-50: #fbf4ff;
  --color-dreamy-candy-forest-100: #f6e8ff;
  --color-dreamy-candy-forest-200: #ebcfff;
  --color-dreamy-candy-forest-300: #dab5f2;
  --color-dreamy-candy-forest-400: #be93da;
  --color-dreamy-candy-forest-500: #a177bb;
  --color-dreamy-candy-forest-600: #845c9d;
  --color-dreamy-candy-forest-700: #6b4581;
  --color-dreamy-candy-forest-800: #543368;
  --color-dreamy-candy-forest-900: #412552;
  --color-dreamy-candy-forest-950: #291535;
  --color-botanical: #477125;
  --color-botanical-50: #e5ffd5;
  --color-botanical-100: #d6f5c3;
  --color-botanical-200: #bde1a6;
  --color-botanical-300: #a2cb87;
  --color-botanical-400: #7fab61;
  --color-botanical-500: #628e42;
  --color-botanical-600: #477125;
  --color-botanical-700: #365a17;
  --color-botanical-800: #28470a;
  --color-botanical-900: #1d3704;
  --color-botanical-950: #102301;
  --color-dark-prom-queen: #221427;
  --color-dark-prom-queen-50: #fbf1ff;
  --color-dark-prom-queen-100: #f2e6f7;
  --color-dark-prom-queen-200: #e0d2e5;
  --color-dark-prom-queen-300: #cabad0;
  --color-dark-prom-queen-400: #ac9ab2;
  --color-dark-prom-queen-500: #8f7e96;
  --color-dark-prom-queen-600: #73637a;
  --color-dark-prom-queen-700: #5b4c60;
  --color-dark-prom-queen-800: #46394b;
  --color-dark-prom-queen-900: #342a38;
  --color-dark-prom-queen-950: #221427;
}