Love Affair to Warrior Queen color palette

FFBEC8Love Affair DE5579Fever Dream EA9093Pink Porky 7D0B35Inescapable Lover A6314DWarrior Queen

About this palette

Love Affair to Warrior Queen is a 5-color warm, monochromatic palette: #FFBEC8 (Love Affair), #DE5579 (Fever Dream), #EA9093 (Pink Porky), #7D0B35 (Inescapable Lover), #A6314D (Warrior Queen). It mixes pink, red tones and feels warm overall. The strongest text pairing is #FFBEC8 on #7D0B35 with a contrast ratio of 6.82:1, and 2 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Love Affair	rgb(255, 190, 200)	hsl(351, 100%, 87%)
Fever Dream	rgb(222, 85, 121)	hsl(344, 67%, 60%)
Pink Porky	rgb(234, 144, 147)	hsl(358, 68%, 74%)
Inescapable Lover	rgb(125, 11, 53)	hsl(338, 84%, 27%)
Warrior Queen	rgb(166, 49, 77)	hsl(346, 54%, 42%)

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.

Aa6.82:1 Good#FFBEC8 on #7D0B35
Aa6.82:1 Good#7D0B35 on #FFBEC8
Aa4.52:1 Good#EA9093 on #7D0B35
Aa4.52:1 Good#7D0B35 on #EA9093
Aa4.25:1 Poor#FFBEC8 on #A6314D
Aa4.25:1 Poor#A6314D on #FFBEC8

Color blindness preview

CSS variables

/* Love Affair to Warrior Queen — https://swatchly.xyz/palette/ffbec8-de5579-ea9093-7d0b35-a6314d */
:root {
  --love-affair: #ffbec8;
  --fever-dream: #de5579;
  --pink-porky: #ea9093;
  --inescapable-lover: #7d0b35;
  --warrior-queen: #a6314d;
}

Tailwind CSS v4

/* Love Affair to Warrior Queen — https://swatchly.xyz/palette/ffbec8-de5579-ea9093-7d0b35-a6314d */
@theme {
  --color-love-affair: #ffbec8;
  --color-love-affair-50: #ffecee;
  --color-love-affair-100: #ffdde1;
  --color-love-affair-200: #ffbec8;
  --color-love-affair-300: #e3abb4;
  --color-love-affair-400: #c78b95;
  --color-love-affair-500: #ac717a;
  --color-love-affair-600: #8f5861;
  --color-love-affair-700: #76434d;
  --color-love-affair-800: #5f333b;
  --color-love-affair-900: #4b262d;
  --color-love-affair-950: #30161b;
  --color-fever-dream: #de5579;
  --color-fever-dream-50: #fff3f4;
  --color-fever-dream-100: #ffe6ea;
  --color-fever-dream-200: #ffcbd3;
  --color-fever-dream-300: #ffa9b9;
  --color-fever-dream-400: #f97594;
  --color-fever-dream-500: #de5579;
  --color-fever-dream-600: #bd375e;
  --color-fever-dream-700: #9d1f48;
  --color-fever-dream-800: #7f0c37;
  --color-fever-dream-900: #650128;
  --color-fever-dream-950: #420018;
  --color-pink-porky: #ea9093;
  --color-pink-porky-50: #fff7f7;
  --color-pink-porky-100: #ffecec;
  --color-pink-porky-200: #ffd3d3;
  --color-pink-porky-300: #ffb4b5;
  --color-pink-porky-400: #ea9093;
  --color-pink-porky-500: #c97376;
  --color-pink-porky-600: #a9565b;
  --color-pink-porky-700: #8b3f44;
  --color-pink-porky-800: #6f2d32;
  --color-pink-porky-900: #571f24;
  --color-pink-porky-950: #371014;
  --color-inescapable-lover: #7d0b35;
  --color-inescapable-lover-50: #fff1f3;
  --color-inescapable-lover-100: #ffe3e7;
  --color-inescapable-lover-200: #ffc6cf;
  --color-inescapable-lover-300: #ffa2b4;
  --color-inescapable-lover-400: #ea7a92;
  --color-inescapable-lover-500: #cd5c77;
  --color-inescapable-lover-600: #ae415d;
  --color-inescapable-lover-700: #902d48;
  --color-inescapable-lover-800: #7d0b35;
  --color-inescapable-lover-900: #5e1229;
  --color-inescapable-lover-950: #3e0718;
  --color-warrior-queen: #a6314d;
  --color-warrior-queen-50: #fff1f3;
  --color-warrior-queen-100: #ffe1e4;
  --color-warrior-queen-200: #ffc1c8;
  --color-warrior-queen-300: #ff9aa9;
  --color-warrior-queen-400: #e66f84;
  --color-warrior-queen-500: #c75068;
  --color-warrior-queen-600: #a6314d;
  --color-warrior-queen-700: #87213b;
  --color-warrior-queen-800: #6e142d;
  --color-warrior-queen-900: #580b21;
  --color-warrior-queen-950: #3a0413;
}