Perfume Haze to Midnight Masquerade Color Palette

About this palette

Perfume Haze to Midnight Masquerade is a 4-color muted, vintage, gradient palette: #F7E8F5 (Perfume Haze), #C794AB (Pinch Me), #8A6362 (Chivalrous Walrus), #382B3F (Midnight Masquerade). It mixes white, pink, red, purple tones and feels warm overall. The strongest text pairing is #F7E8F5 on #382B3F with a contrast ratio of 11.24:1, and 2 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Perfume Haze	rgb(247, 232, 245)	hsl(308, 48%, 94%)
Pinch Me	rgb(199, 148, 171)	hsl(333, 31%, 68%)
Chivalrous Walrus	rgb(138, 99, 98)	hsl(1, 17%, 46%)
Midnight Masquerade	rgb(56, 43, 63)	hsl(279, 19%, 21%)

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.24:1 Very good#F7E8F5 on #382B3F
Aa11.24:1 Very good#382B3F on #F7E8F5
Aa5.21:1 Good#C794AB on #382B3F
Aa5.21:1 Good#382B3F on #C794AB
Aa4.41:1 Poor#F7E8F5 on #8A6362
Aa4.41:1 Poor#8A6362 on #F7E8F5

Color blindness preview

CSS variables

/* Perfume Haze to Midnight Masquerade — https://swatchly.xyz/palette/f7e8f5-c794ab-8a6362-382b3f */
:root {
  --perfume-haze: #f7e8f5;
  --pinch-me: #c794ab;
  --chivalrous-walrus: #8a6362;
  --midnight-masquerade: #382b3f;
}

Tailwind CSS v4

/* Perfume Haze to Midnight Masquerade — https://swatchly.xyz/palette/f7e8f5-c794ab-8a6362-382b3f */
@theme {
  --color-perfume-haze: #f7e8f5;
  --color-perfume-haze-50: #fcf4fb;
  --color-perfume-haze-100: #f7e8f5;
  --color-perfume-haze-200: #e0d5df;
  --color-perfume-haze-300: #cabec9;
  --color-perfume-haze-400: #ab9ea9;
  --color-perfume-haze-500: #8f828e;
  --color-perfume-haze-600: #746773;
  --color-perfume-haze-700: #5d515b;
  --color-perfume-haze-800: #493f47;
  --color-perfume-haze-900: #383037;
  --color-perfume-haze-950: #231d22;
  --color-pinch-me: #c794ab;
  --color-pinch-me-50: #fff3f8;
  --color-pinch-me-100: #ffe5f0;
  --color-pinch-me-200: #f5cdde;
  --color-pinch-me-300: #e2b5c9;
  --color-pinch-me-400: #c794ab;
  --color-pinch-me-500: #a9788f;
  --color-pinch-me-600: #8c5e73;
  --color-pinch-me-700: #72485c;
  --color-pinch-me-800: #5b3648;
  --color-pinch-me-900: #472837;
  --color-pinch-me-950: #2d1722;
  --color-chivalrous-walrus: #8a6362;
  --color-chivalrous-walrus-50: #fff1f1;
  --color-chivalrous-walrus-100: #ffe5e3;
  --color-chivalrous-walrus-200: #f1cfce;
  --color-chivalrous-walrus-300: #ddb8b7;
  --color-chivalrous-walrus-400: #c09897;
  --color-chivalrous-walrus-500: #a57d7c;
  --color-chivalrous-walrus-600: #8a6362;
  --color-chivalrous-walrus-700: #704d4c;
  --color-chivalrous-walrus-800: #593b3a;
  --color-chivalrous-walrus-900: #462c2c;
  --color-chivalrous-walrus-950: #2d1a1a;
  --color-midnight-masquerade: #382b3f;
  --color-midnight-masquerade-50: #faf1ff;
  --color-midnight-masquerade-100: #f1e7f7;
  --color-midnight-masquerade-200: #ded2e5;
  --color-midnight-masquerade-300: #c9bbd1;
  --color-midnight-masquerade-400: #aa9bb2;
  --color-midnight-masquerade-500: #8e7f96;
  --color-midnight-masquerade-600: #73647b;
  --color-midnight-masquerade-700: #5b4e62;
  --color-midnight-masquerade-800: #473c4d;
  --color-midnight-masquerade-900: #382b3f;
  --color-midnight-masquerade-950: #211b25;
}