Her Fierceness to Sugar Coated color palette

731940Her Fierceness 8C4256Liaison CC828FI Love You Pink FA97B3Pastel Magenta FFEDF1Sugar Coated

About this palette

Her Fierceness to Sugar Coated is a 5-color warm, vintage, monochromatic, gradient palette: #731940 (Her Fierceness), #8C4256 (Liaison), #CC828F (I Love You Pink), #FA97B3 (Pastel Magenta), #FFEDF1 (Sugar Coated). It mixes red, pink, white tones and feels warm overall. The strongest text pairing is #731940 on #FFEDF1 with a contrast ratio of 9.60:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Her Fierceness	rgb(115, 25, 64)	hsl(334, 64%, 27%)
Liaison	rgb(140, 66, 86)	hsl(344, 36%, 40%)
I Love You Pink	rgb(204, 130, 143)	hsl(349, 42%, 65%)
Pastel Magenta	rgb(250, 151, 179)	hsl(343, 91%, 79%)
Sugar Coated	rgb(255, 237, 241)	hsl(347, 100%, 96%)

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.

Aa9.60:1 Very good#731940 on #FFEDF1
Aa9.60:1 Very good#FFEDF1 on #731940
Aa6.15:1 Good#8C4256 on #FFEDF1
Aa6.15:1 Good#FFEDF1 on #8C4256
Aa5.22:1 Good#731940 on #FA97B3
Aa5.22:1 Good#FA97B3 on #731940
Aa3.69:1 Poor#731940 on #CC828F
Aa3.69:1 Poor#CC828F on #731940

Color blindness preview

CSS variables

/* Her Fierceness to Sugar Coated — https://swatchly.xyz/palette/731940-8c4256-cc828f-fa97b3-ffedf1 */
:root {
  --her-fierceness: #731940;
  --liaison: #8c4256;
  --i-love-you-pink: #cc828f;
  --pastel-magenta: #fa97b3;
  --sugar-coated: #ffedf1;
}

Tailwind CSS v4

/* Her Fierceness to Sugar Coated — https://swatchly.xyz/palette/731940-8c4256-cc828f-fa97b3-ffedf1 */
@theme {
  --color-her-fierceness: #731940;
  --color-her-fierceness-50: #fff1f5;
  --color-her-fierceness-100: #ffe3ea;
  --color-her-fierceness-200: #ffc5d6;
  --color-her-fierceness-300: #fba3bf;
  --color-her-fierceness-400: #df7f9f;
  --color-her-fierceness-500: #c26284;
  --color-her-fierceness-600: #a34869;
  --color-her-fierceness-700: #863353;
  --color-her-fierceness-800: #731940;
  --color-her-fierceness-900: #561831;
  --color-her-fierceness-950: #380c1e;
  --color-liaison: #8c4256;
  --color-liaison-50: #fff1f4;
  --color-liaison-100: #ffe3e8;
  --color-liaison-200: #ffc8d4;
  --color-liaison-300: #f5adbd;
  --color-liaison-400: #da8c9e;
  --color-liaison-500: #c07184;
  --color-liaison-600: #a4586b;
  --color-liaison-700: #8c4256;
  --color-liaison-800: #703243;
  --color-liaison-900: #592433;
  --color-liaison-950: #3a141f;
  --color-i-love-you-pink: #cc828f;
  --color-i-love-you-pink-50: #ffeef0;
  --color-i-love-you-pink-100: #ffdee2;
  --color-i-love-you-pink-200: #fdc0c9;
  --color-i-love-you-pink-300: #e9a5b0;
  --color-i-love-you-pink-400: #cc828f;
  --color-i-love-you-pink-500: #b06875;
  --color-i-love-you-pink-600: #93505d;
  --color-i-love-you-pink-700: #793d49;
  --color-i-love-you-pink-800: #622d38;
  --color-i-love-you-pink-900: #4e212b;
  --color-i-love-you-pink-950: #34131a;
  --color-pastel-magenta: #fa97b3;
  --color-pastel-magenta-50: #ffebf0;
  --color-pastel-magenta-100: #ffdbe4;
  --color-pastel-magenta-200: #ffbbcd;
  --color-pastel-magenta-300: #fa97b3;
  --color-pastel-magenta-400: #d87a95;
  --color-pastel-magenta-500: #bc5f7c;
  --color-pastel-magenta-600: #9e4763;
  --color-pastel-magenta-700: #83344e;
  --color-pastel-magenta-800: #6b253d;
  --color-pastel-magenta-900: #561a2f;
  --color-pastel-magenta-950: #380d1d;
  --color-sugar-coated: #ffedf1;
  --color-sugar-coated-50: #ffedf1;
  --color-sugar-coated-100: #f1e5e8;
  --color-sugar-coated-200: #dfd2d5;
  --color-sugar-coated-300: #cabbbe;
  --color-sugar-coated-400: #ac9c9f;
  --color-sugar-coated-500: #918185;
  --color-sugar-coated-600: #76676b;
  --color-sugar-coated-700: #5f5154;
  --color-sugar-coated-800: #4b3f41;
  --color-sugar-coated-900: #3a3032;
  --color-sugar-coated-950: #241d1f;
}