Sugarwinkle to Night Demons color palette

FEC4DFSugarwinkle E18997Pulp B97B7CNipple 7C3E6BBruise 422D49Sanctum of Shadows 211A27Night Demons

Open in generator Export PNG, PDF, ASE…

About this palette

Sugarwinkle to Night Demons is a 6-color warm, vintage palette: #FEC4DF (Sugarwinkle), #E18997 (Pulp), #B97B7C (Nipple), #7C3E6B (Bruise), #422D49 (Sanctum of Shadows), #211A27 (Night Demons). It mixes pink, red, purple, gray tones and feels warm overall. The strongest text pairing is #FEC4DF on #211A27 with a contrast ratio of 11.42:1, and 6 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Sugarwinkle	rgb(254, 196, 223)	hsl(332, 97%, 88%)
Pulp	rgb(225, 137, 151)	hsl(350, 59%, 71%)
Nipple	rgb(185, 123, 124)	hsl(359, 31%, 60%)
Bruise	rgb(124, 62, 107)	hsl(316, 33%, 36%)
Sanctum of Shadows	rgb(66, 45, 73)	hsl(285, 24%, 23%)
Night Demons	rgb(33, 26, 39)	hsl(272, 20%, 13%)

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.42:1 Very good#FEC4DF on #211A27
Aa11.42:1 Very good#211A27 on #FEC4DF
Aa8.32:1 Very good#FEC4DF on #422D49
Aa8.32:1 Very good#422D49 on #FEC4DF
Aa6.63:1 Good#E18997 on #211A27
Aa6.63:1 Good#211A27 on #E18997
Aa5.14:1 Good#FEC4DF on #7C3E6B
Aa5.14:1 Good#7C3E6B on #FEC4DF

Color blindness preview

CSS variables

/* Sugarwinkle to Night Demons — https://swatchly.xyz/palette/fec4df-e18997-b97b7c-7c3e6b-422d49-211a27 */
:root {
  --sugarwinkle: #fec4df;
  --pulp: #e18997;
  --nipple: #b97b7c;
  --bruise: #7c3e6b;
  --sanctum-of-shadows: #422d49;
  --night-demons: #211a27;
}

Tailwind CSS v4

/* Sugarwinkle to Night Demons — https://swatchly.xyz/palette/fec4df-e18997-b97b7c-7c3e6b-422d49-211a27 */
@theme {
  --color-sugarwinkle: #fec4df;
  --color-sugarwinkle-50: #fff0f7;
  --color-sugarwinkle-100: #ffe2ef;
  --color-sugarwinkle-200: #fec4df;
  --color-sugarwinkle-300: #e1b1c7;
  --color-sugarwinkle-400: #c490a8;
  --color-sugarwinkle-500: #a8748d;
  --color-sugarwinkle-600: #8c5a72;
  --color-sugarwinkle-700: #72455b;
  --color-sugarwinkle-800: #5b3448;
  --color-sugarwinkle-900: #482737;
  --color-sugarwinkle-950: #2e1622;
  --color-pulp: #e18997;
  --color-pulp-50: #fff4f5;
  --color-pulp-100: #ffe7ea;
  --color-pulp-200: #ffccd2;
  --color-pulp-300: #f9adb8;
  --color-pulp-400: #e18997;
  --color-pulp-500: #c26d7b;
  --color-pulp-600: #a35261;
  --color-pulp-700: #863c4b;
  --color-pulp-800: #6b2c39;
  --color-pulp-900: #551f2a;
  --color-pulp-950: #371019;
  --color-nipple: #b97b7c;
  --color-nipple-50: #fff3f3;
  --color-nipple-100: #ffe8e8;
  --color-nipple-200: #ffcece;
  --color-nipple-300: #eeb6b7;
  --color-nipple-400: #d39697;
  --color-nipple-500: #b97b7c;
  --color-nipple-600: #9a5f61;
  --color-nipple-700: #7e494a;
  --color-nipple-800: #653638;
  --color-nipple-900: #4f2829;
  --color-nipple-950: #331718;
  --color-bruise: #7c3e6b;
  --color-bruise-50: #fff0fa;
  --color-bruise-100: #ffe1f5;
  --color-bruise-200: #fbc5e9;
  --color-bruise-300: #e9acd5;
  --color-bruise-400: #cc8ab8;
  --color-bruise-500: #b16e9d;
  --color-bruise-600: #945582;
  --color-bruise-700: #7c3e6b;
  --color-bruise-800: #622f54;
  --color-bruise-900: #4d2242;
  --color-bruise-950: #32132a;
  --color-sanctum-of-shadows: #422d49;
  --color-sanctum-of-shadows-50: #fbf1ff;
  --color-sanctum-of-shadows-100: #f5e5fb;
  --color-sanctum-of-shadows-200: #e3d0ea;
  --color-sanctum-of-shadows-300: #ceb8d5;
  --color-sanctum-of-shadows-400: #b098b8;
  --color-sanctum-of-shadows-500: #967d9e;
  --color-sanctum-of-shadows-600: #7b6483;
  --color-sanctum-of-shadows-700: #644f6b;
  --color-sanctum-of-shadows-800: #503d56;
  --color-sanctum-of-shadows-900: #422d49;
  --color-sanctum-of-shadows-950: #291d2c;
  --color-night-demons: #211a27;
  --color-night-demons-50: #f8f3fd;
  --color-night-demons-100: #eee8f4;
  --color-night-demons-200: #dbd4e2;
  --color-night-demons-300: #c5bdcc;
  --color-night-demons-400: #a69dae;
  --color-night-demons-500: #8a8292;
  --color-night-demons-600: #6f6777;
  --color-night-demons-700: #58515f;
  --color-night-demons-800: #443e4a;
  --color-night-demons-900: #342f39;
  --color-night-demons-950: #211a27;
}