Sugarwinkle to Shadow Play color palette

FCCAE3Sugarwinkle F18D8EVinaceous Cinnamon D73C20Fatal Fury 743750Passionate Plum 291200Shadow Play

About this palette

Sugarwinkle to Shadow Play is a 5-color warm, gradient palette: #FCCAE3 (Sugarwinkle), #F18D8E (Vinaceous Cinnamon), #D73C20 (Fatal Fury), #743750 (Passionate Plum), #291200 (Shadow Play). It mixes pink, red, brown tones and feels warm overall. The strongest text pairing is #FCCAE3 on #291200 with a contrast ratio of 12.45:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Sugarwinkle	rgb(252, 202, 227)	hsl(330, 89%, 89%)
Vinaceous Cinnamon	rgb(241, 141, 142)	hsl(359, 78%, 75%)
Fatal Fury	rgb(215, 60, 32)	hsl(9, 74%, 48%)
Passionate Plum	rgb(116, 55, 80)	hsl(335, 36%, 34%)
Shadow Play	rgb(41, 18, 0)	hsl(26, 100%, 8%)

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.

Aa12.45:1 Super#FCCAE3 on #291200
Aa12.45:1 Super#291200 on #FCCAE3
Aa7.57:1 Very good#F18D8E on #291200
Aa7.57:1 Very good#291200 on #F18D8E
Aa6.11:1 Good#FCCAE3 on #743750
Aa6.11:1 Good#743750 on #FCCAE3
Aa3.86:1 Poor#D73C20 on #291200
Aa3.86:1 Poor#291200 on #D73C20

Color blindness preview

CSS variables

/* Sugarwinkle to Shadow Play — https://swatchly.xyz/palette/fccae3-f18d8e-d73c20-743750-291200 */
:root {
  --sugarwinkle: #fccae3;
  --vinaceous-cinnamon: #f18d8e;
  --fatal-fury: #d73c20;
  --passionate-plum: #743750;
  --shadow-play: #291200;
}

Tailwind CSS v4

/* Sugarwinkle to Shadow Play — https://swatchly.xyz/palette/fccae3-f18d8e-d73c20-743750-291200 */
@theme {
  --color-sugarwinkle: #fccae3;
  --color-sugarwinkle-50: #fff4f9;
  --color-sugarwinkle-100: #ffe6f2;
  --color-sugarwinkle-200: #fccae3;
  --color-sugarwinkle-300: #dfb6ca;
  --color-sugarwinkle-400: #c194ab;
  --color-sugarwinkle-500: #a5788f;
  --color-sugarwinkle-600: #885e74;
  --color-sugarwinkle-700: #6e485c;
  --color-sugarwinkle-800: #583648;
  --color-sugarwinkle-900: #452938;
  --color-sugarwinkle-950: #2c1823;
  --color-vinaceous-cinnamon: #f18d8e;
  --color-vinaceous-cinnamon-50: #fff7f7;
  --color-vinaceous-cinnamon-100: #ffedec;
  --color-vinaceous-cinnamon-200: #ffd4d3;
  --color-vinaceous-cinnamon-300: #ffb5b5;
  --color-vinaceous-cinnamon-400: #f18d8e;
  --color-vinaceous-cinnamon-500: #cf7071;
  --color-vinaceous-cinnamon-600: #af5356;
  --color-vinaceous-cinnamon-700: #903b3f;
  --color-vinaceous-cinnamon-800: #74292e;
  --color-vinaceous-cinnamon-900: #5a1c20;
  --color-vinaceous-cinnamon-950: #3a0e11;
  --color-fatal-fury: #d73c20;
  --color-fatal-fury-50: #ffefec;
  --color-fatal-fury-100: #ffdfd8;
  --color-fatal-fury-200: #ffc0b3;
  --color-fatal-fury-300: #ff9a86;
  --color-fatal-fury-400: #f86044;
  --color-fatal-fury-500: #d73c20;
  --color-fatal-fury-600: #b62000;
  --color-fatal-fury-700: #921800;
  --color-fatal-fury-800: #751100;
  --color-fatal-fury-900: #5d0b00;
  --color-fatal-fury-950: #3e0400;
  --color-passionate-plum: #743750;
  --color-passionate-plum-50: #fff1f5;
  --color-passionate-plum-100: #ffe2ec;
  --color-passionate-plum-200: #fcc4d8;
  --color-passionate-plum-300: #e8aac0;
  --color-passionate-plum-400: #ca879f;
  --color-passionate-plum-500: #ac6a83;
  --color-passionate-plum-600: #8d4f67;
  --color-passionate-plum-700: #743750;
  --color-passionate-plum-800: #5a2b3e;
  --color-passionate-plum-900: #471f30;
  --color-passionate-plum-950: #2e111d;
  --color-shadow-play: #291200;
  --color-shadow-play-50: #fff3e9;
  --color-shadow-play-100: #fce7d7;
  --color-shadow-play-200: #ebd2c0;
  --color-shadow-play-300: #d6bba6;
  --color-shadow-play-400: #b99b84;
  --color-shadow-play-500: #9c7e67;
  --color-shadow-play-600: #7f634d;
  --color-shadow-play-700: #644c38;
  --color-shadow-play-800: #4e3828;
  --color-shadow-play-900: #3a291b;
  --color-shadow-play-950: #291200;
}