Sugarwinkle to Bane of Royalty Color Palette

About this palette

Sugarwinkle to Bane of Royalty is a 4-color warm, monochromatic palette: #FFC1DF (Sugarwinkle), #361221 (Chocolate Kiss), #BF718B (Prehistoric Pink), #8D195F (Bane of Royalty). It mixes pink, red tones and feels warm overall. The strongest text pairing is #FFC1DF on #361221 with a contrast ratio of 11.02:1, and 3 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Sugarwinkle	rgb(255, 193, 223)	hsl(331, 100%, 88%)
Chocolate Kiss	rgb(54, 18, 33)	hsl(335, 50%, 14%)
Prehistoric Pink	rgb(191, 113, 139)	hsl(340, 38%, 60%)
Bane of Royalty	rgb(141, 25, 95)	hsl(324, 70%, 33%)

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.02:1 Very good#FFC1DF on #361221
Aa11.02:1 Very good#361221 on #FFC1DF
Aa5.72:1 Good#FFC1DF on #8D195F
Aa5.72:1 Good#8D195F on #FFC1DF
Aa4.70:1 Good#361221 on #BF718B
Aa4.70:1 Good#BF718B on #361221

Color blindness preview

CSS variables

/* Sugarwinkle to Bane of Royalty — https://swatchly.xyz/palette/ffc1df-361221-bf718b-8d195f */
:root {
  --sugarwinkle: #ffc1df;
  --chocolate-kiss: #361221;
  --prehistoric-pink: #bf718b;
  --bane-of-royalty: #8d195f;
}

Tailwind CSS v4

/* Sugarwinkle to Bane of Royalty — https://swatchly.xyz/palette/ffc1df-361221-bf718b-8d195f */
@theme {
  --color-sugarwinkle: #ffc1df;
  --color-sugarwinkle-50: #ffeff6;
  --color-sugarwinkle-100: #ffe0ee;
  --color-sugarwinkle-200: #ffc1df;
  --color-sugarwinkle-300: #e2aec7;
  --color-sugarwinkle-400: #c58da9;
  --color-sugarwinkle-500: #aa728e;
  --color-sugarwinkle-600: #8d5873;
  --color-sugarwinkle-700: #73435c;
  --color-sugarwinkle-800: #5c3348;
  --color-sugarwinkle-900: #492538;
  --color-sugarwinkle-950: #2f1623;
  --color-chocolate-kiss: #361221;
  --color-chocolate-kiss-50: #fff1f5;
  --color-chocolate-kiss-100: #ffe2ec;
  --color-chocolate-kiss-200: #f1ccd8;
  --color-chocolate-kiss-300: #deb4c2;
  --color-chocolate-kiss-400: #c093a2;
  --color-chocolate-kiss-500: #a57787;
  --color-chocolate-kiss-600: #895e6d;
  --color-chocolate-kiss-700: #704957;
  --color-chocolate-kiss-800: #593744;
  --color-chocolate-kiss-900: #472a34;
  --color-chocolate-kiss-950: #361221;
  --color-prehistoric-pink: #bf718b;
  --color-prehistoric-pink-50: #fff3f6;
  --color-prehistoric-pink-100: #ffe6ed;
  --color-prehistoric-pink-200: #ffcada;
  --color-prehistoric-pink-300: #f4aec4;
  --color-prehistoric-pink-400: #d98da5;
  --color-prehistoric-pink-500: #bf718b;
  --color-prehistoric-pink-600: #a0566f;
  --color-prehistoric-pink-700: #834058;
  --color-prehistoric-pink-800: #6a2f44;
  --color-prehistoric-pink-900: #532134;
  --color-prehistoric-pink-950: #36121f;
  --color-bane-of-royalty: #8d195f;
  --color-bane-of-royalty-50: #fff1f7;
  --color-bane-of-royalty-100: #ffe2ef;
  --color-bane-of-royalty-200: #ffc3de;
  --color-bane-of-royalty-300: #ff9bcc;
  --color-bane-of-royalty-400: #e572ae;
  --color-bane-of-royalty-500: #c85392;
  --color-bane-of-royalty-600: #a73876;
  --color-bane-of-royalty-700: #8d195f;
  --color-bane-of-royalty-800: #6f144a;
  --color-bane-of-royalty-900: #580a39;
  --color-bane-of-royalty-950: #3a0324;
}