Prom Corsage to Secret Passage Color Palette

About this palette

Prom Corsage to Secret Passage is a 4-color cool palette: #DEC4E9 (Prom Corsage), #00B1BE (Glassmith), #784E7E (Ninja Princess), #442A00 (Secret Passage). It mixes purple, turquoise, pink, brown tones and feels cool overall. The strongest text pairing is #DEC4E9 on #442A00 with a contrast ratio of 8.36:1, and 2 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Prom Corsage	rgb(222, 196, 233)	hsl(282, 46%, 84%)
Glassmith	rgb(0, 177, 190)	hsl(184, 100%, 37%)
Ninja Princess	rgb(120, 78, 126)	hsl(292, 24%, 40%)
Secret Passage	rgb(68, 42, 0)	hsl(37, 100%, 13%)

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.

Aa8.36:1 Very good#DEC4E9 on #442A00
Aa8.36:1 Very good#442A00 on #DEC4E9
Aa5.09:1 Good#00B1BE on #442A00
Aa5.09:1 Good#442A00 on #00B1BE
Aa4.13:1 Poor#DEC4E9 on #784E7E
Aa4.13:1 Poor#784E7E on #DEC4E9

Color blindness preview

CSS variables

/* Prom Corsage to Secret Passage — https://swatchly.xyz/palette/dec4e9-00b1be-784e7e-442a00 */
:root {
  --prom-corsage: #dec4e9;
  --glassmith: #00b1be;
  --ninja-princess: #784e7e;
  --secret-passage: #442a00;
}

Tailwind CSS v4

/* Prom Corsage to Secret Passage — https://swatchly.xyz/palette/dec4e9-00b1be-784e7e-442a00 */
@theme {
  --color-prom-corsage: #dec4e9;
  --color-prom-corsage-50: #f8e9ff;
  --color-prom-corsage-100: #eeddf6;
  --color-prom-corsage-200: #dec4e9;
  --color-prom-corsage-300: #c7b0d0;
  --color-prom-corsage-400: #aa92b4;
  --color-prom-corsage-500: #90789a;
  --color-prom-corsage-600: #765f80;
  --color-prom-corsage-700: #604b68;
  --color-prom-corsage-800: #4c3a54;
  --color-prom-corsage-900: #3b2c42;
  --color-prom-corsage-950: #251a2a;
  --color-glassmith: #00b1be;
  --color-glassmith-50: #d7fbff;
  --color-glassmith-100: #aef7ff;
  --color-glassmith-200: #88e6ef;
  --color-glassmith-300: #5fd0db;
  --color-glassmith-400: #00b1be;
  --color-glassmith-500: #00939e;
  --color-glassmith-600: #007780;
  --color-glassmith-700: #005f66;
  --color-glassmith-800: #004a50;
  --color-glassmith-900: #003a3f;
  --color-glassmith-950: #002528;
  --color-ninja-princess: #784e7e;
  --color-ninja-princess-50: #fdf0ff;
  --color-ninja-princess-100: #fce1ff;
  --color-ninja-princess-200: #efccf4;
  --color-ninja-princess-300: #ddb5e2;
  --color-ninja-princess-400: #c196c7;
  --color-ninja-princess-500: #a87cae;
  --color-ninja-princess-600: #8e6394;
  --color-ninja-princess-700: #784e7e;
  --color-ninja-princess-800: #5f3c64;
  --color-ninja-princess-900: #4b2c4f;
  --color-ninja-princess-950: #301a34;
  --color-secret-passage: #442a00;
  --color-secret-passage-50: #fff3e5;
  --color-secret-passage-100: #fce8ce;
  --color-secret-passage-200: #ecd3b5;
  --color-secret-passage-300: #d8bc99;
  --color-secret-passage-400: #b99b75;
  --color-secret-passage-500: #9e7f58;
  --color-secret-passage-600: #81653f;
  --color-secret-passage-700: #684e2c;
  --color-secret-passage-800: #523b1d;
  --color-secret-passage-900: #442a00;
  --color-secret-passage-950: #281a08;
}