Slightly in Love to Dark Prom Queen Color Palette

About this palette

Slightly in Love to Dark Prom Queen is a 4-color warm, vintage, gradient palette: #FFE5DC (Slightly in Love), #D290B6 (Exotic Lilac), #803349 (Satin Chocolate), #2B1228 (Dark Prom Queen). It mixes white, pink, red, purple tones and feels warm overall. The strongest text pairing is #FFE5DC on #2B1228 with a contrast ratio of 14.34:1, and 3 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Slightly in Love	rgb(255, 229, 220)	hsl(15, 100%, 93%)
Exotic Lilac	rgb(210, 144, 182)	hsl(325, 42%, 69%)
Satin Chocolate	rgb(128, 51, 73)	hsl(343, 43%, 35%)
Dark Prom Queen	rgb(43, 18, 40)	hsl(307, 41%, 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.

Aa14.34:1 Super#FFE5DC on #2B1228
Aa14.34:1 Super#2B1228 on #FFE5DC
Aa7.03:1 Very good#FFE5DC on #803349
Aa7.03:1 Very good#803349 on #FFE5DC
Aa6.89:1 Good#D290B6 on #2B1228
Aa6.89:1 Good#2B1228 on #D290B6
Aa3.38:1 Poor#D290B6 on #803349
Aa3.38:1 Poor#803349 on #D290B6

Color blindness preview

CSS variables

/* Slightly in Love to Dark Prom Queen — https://swatchly.xyz/palette/ffe5dc-d290b6-803349-2b1228 */
:root {
  --slightly-in-love: #ffe5dc;
  --exotic-lilac: #d290b6;
  --satin-chocolate: #803349;
  --dark-prom-queen: #2b1228;
}

Tailwind CSS v4

/* Slightly in Love to Dark Prom Queen — https://swatchly.xyz/palette/ffe5dc-d290b6-803349-2b1228 */
@theme {
  --color-slightly-in-love: #ffe5dc;
  --color-slightly-in-love-50: #fff2ee;
  --color-slightly-in-love-100: #ffe5dc;
  --color-slightly-in-love-200: #e6d3cc;
  --color-slightly-in-love-300: #d1bcb4;
  --color-slightly-in-love-400: #b39c94;
  --color-slightly-in-love-500: #988078;
  --color-slightly-in-love-600: #7c665f;
  --color-slightly-in-love-700: #645049;
  --color-slightly-in-love-800: #4f3e38;
  --color-slightly-in-love-900: #3e2f2a;
  --color-slightly-in-love-950: #271d19;
  --color-exotic-lilac: #d290b6;
  --color-exotic-lilac-50: #fff4fa;
  --color-exotic-lilac-100: #ffe7f4;
  --color-exotic-lilac-200: #fdcbe7;
  --color-exotic-lilac-300: #ebb3d3;
  --color-exotic-lilac-400: #d290b6;
  --color-exotic-lilac-500: #b37499;
  --color-exotic-lilac-600: #95597d;
  --color-exotic-lilac-700: #7a4364;
  --color-exotic-lilac-800: #61314e;
  --color-exotic-lilac-900: #4c243c;
  --color-exotic-lilac-950: #301425;
  --color-satin-chocolate: #803349;
  --color-satin-chocolate-50: #fff1f4;
  --color-satin-chocolate-100: #ffe3e8;
  --color-satin-chocolate-200: #ffc5d1;
  --color-satin-chocolate-300: #f3a6b7;
  --color-satin-chocolate-400: #d68396;
  --color-satin-chocolate-500: #b9667a;
  --color-satin-chocolate-600: #994c60;
  --color-satin-chocolate-700: #803349;
  --color-satin-chocolate-800: #642839;
  --color-satin-chocolate-900: #4f1c2b;
  --color-satin-chocolate-950: #340f1a;
  --color-dark-prom-queen: #2b1228;
  --color-dark-prom-queen-50: #fff0fc;
  --color-dark-prom-queen-100: #f9e3f5;
  --color-dark-prom-queen-200: #e8cee4;
  --color-dark-prom-queen-300: #d4b6cf;
  --color-dark-prom-queen-400: #b696b0;
  --color-dark-prom-queen-500: #9a7a94;
  --color-dark-prom-queen-600: #7d6079;
  --color-dark-prom-queen-700: #644a60;
  --color-dark-prom-queen-800: #4f384b;
  --color-dark-prom-queen-900: #3c293a;
  --color-dark-prom-queen-950: #2b1228;
}