Sugarwinkle to Soul Anchor color palette

FFC9DFSugarwinkle E283B3Mangala Pink CA5A94Llilacquered 793C59Passionate Plum 581137Soul Anchor

About this palette

Sugarwinkle to Soul Anchor is a 5-color warm, monochromatic, gradient palette: #FFC9DF (Sugarwinkle), #E283B3 (Mangala Pink), #CA5A94 (Llilacquered), #793C59 (Passionate Plum), #581137 (Soul Anchor). It mixes pink, red tones and feels warm overall. The strongest text pairing is #FFC9DF on #581137 with a contrast ratio of 9.46:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Sugarwinkle	rgb(255, 201, 223)	hsl(336, 100%, 89%)
Mangala Pink	rgb(226, 131, 179)	hsl(330, 62%, 70%)
Llilacquered	rgb(202, 90, 148)	hsl(329, 51%, 57%)
Passionate Plum	rgb(121, 60, 89)	hsl(331, 34%, 35%)
Soul Anchor	rgb(88, 17, 55)	hsl(328, 68%, 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.

Aa9.46:1 Very good#FFC9DF on #581137
Aa9.46:1 Very good#581137 on #FFC9DF
Aa5.64:1 Good#FFC9DF on #793C59
Aa5.64:1 Good#793C59 on #FFC9DF
Aa5.24:1 Good#E283B3 on #581137
Aa5.24:1 Good#581137 on #E283B3
Aa3.48:1 Poor#CA5A94 on #581137
Aa3.48:1 Poor#581137 on #CA5A94

Color blindness preview

CSS variables

/* Sugarwinkle to Soul Anchor — https://swatchly.xyz/palette/ffc9df-e283b3-ca5a94-793c59-581137 */
:root {
  --sugarwinkle: #ffc9df;
  --mangala-pink: #e283b3;
  --llilacquered: #ca5a94;
  --passionate-plum: #793c59;
  --soul-anchor: #581137;
}

Tailwind CSS v4

/* Sugarwinkle to Soul Anchor — https://swatchly.xyz/palette/ffc9df-e283b3-ca5a94-793c59-581137 */
@theme {
  --color-sugarwinkle: #ffc9df;
  --color-sugarwinkle-50: #fff4f8;
  --color-sugarwinkle-100: #ffe6f0;
  --color-sugarwinkle-200: #ffc9df;
  --color-sugarwinkle-300: #e2b5c7;
  --color-sugarwinkle-400: #c493a7;
  --color-sugarwinkle-500: #a8778c;
  --color-sugarwinkle-600: #8b5d71;
  --color-sugarwinkle-700: #714759;
  --color-sugarwinkle-800: #5a3545;
  --color-sugarwinkle-900: #462835;
  --color-sugarwinkle-950: #2d1721;
  --color-mangala-pink: #e283b3;
  --color-mangala-pink-50: #fff3f8;
  --color-mangala-pink-100: #ffe6f1;
  --color-mangala-pink-200: #ffc9e2;
  --color-mangala-pink-300: #faa8d0;
  --color-mangala-pink-400: #e283b3;
  --color-mangala-pink-500: #c26796;
  --color-mangala-pink-600: #a34c7a;
  --color-mangala-pink-700: #863662;
  --color-mangala-pink-800: #6c264d;
  --color-mangala-pink-900: #551a3b;
  --color-mangala-pink-950: #370d25;
  --color-llilacquered: #ca5a94;
  --color-llilacquered-50: #fff1f7;
  --color-llilacquered-100: #ffe3ef;
  --color-llilacquered-200: #ffc5df;
  --color-llilacquered-300: #ff9fcd;
  --color-llilacquered-400: #e678af;
  --color-llilacquered-500: #ca5a94;
  --color-llilacquered-600: #aa3f79;
  --color-llilacquered-700: #8d2a61;
  --color-llilacquered-800: #721a4c;
  --color-llilacquered-900: #5b0f3b;
  --color-llilacquered-950: #3c0525;
  --color-passionate-plum: #793c59;
  --color-passionate-plum-50: #fff1f6;
  --color-passionate-plum-100: #ffe2ee;
  --color-passionate-plum-200: #fcc5dc;
  --color-passionate-plum-300: #e9acc6;
  --color-passionate-plum-400: #cc89a7;
  --color-passionate-plum-500: #af6d8b;
  --color-passionate-plum-600: #925370;
  --color-passionate-plum-700: #793c59;
  --color-passionate-plum-800: #5f2e45;
  --color-passionate-plum-900: #4b2235;
  --color-passionate-plum-950: #301321;
  --color-soul-anchor: #581137;
  --color-soul-anchor-50: #fff1f6;
  --color-soul-anchor-100: #ffe2ed;
  --color-soul-anchor-200: #ffc4dc;
  --color-soul-anchor-300: #f1a8c7;
  --color-soul-anchor-400: #d485a7;
  --color-soul-anchor-500: #b8698c;
  --color-soul-anchor-600: #9a4f71;
  --color-soul-anchor-700: #7e3a5a;
  --color-soul-anchor-800: #652a46;
  --color-soul-anchor-900: #581137;
  --color-soul-anchor-950: #331021;
}