Sugarwinkle to Sanctum of Shadows Color Palette

About this palette

Sugarwinkle to Sanctum of Shadows is a 5-color warm, gradient palette: #FFC8DF (Sugarwinkle), #FB856F (Smoked Salmon), #B767D0 (Lavender), #884865 (Grape Kiss), #462E4C (Sanctum of Shadows). It mixes pink, red, purple tones and feels warm overall. The strongest text pairing is #FFC8DF on #462E4C with a contrast ratio of 8.30:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Sugarwinkle	rgb(255, 200, 223)	hsl(335, 100%, 89%)
Smoked Salmon	rgb(251, 133, 111)	hsl(9, 95%, 71%)
Lavender	rgb(183, 103, 208)	hsl(286, 53%, 61%)
Grape Kiss	rgb(136, 72, 101)	hsl(333, 31%, 41%)
Sanctum of Shadows	rgb(70, 46, 76)	hsl(288, 25%, 24%)

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.

Aa8.30:1 Very good#FFC8DF on #462E4C
Aa8.30:1 Very good#462E4C on #FFC8DF
Aa4.95:1 Good#FB856F on #462E4C
Aa4.95:1 Good#462E4C on #FB856F
Aa4.61:1 Good#FFC8DF on #884865
Aa4.61:1 Good#884865 on #FFC8DF
Aa3.34:1 Poor#B767D0 on #462E4C
Aa3.34:1 Poor#462E4C on #B767D0

Color blindness preview

CSS variables

/* Sugarwinkle to Sanctum of Shadows — https://swatchly.xyz/palette/ffc8df-fb856f-b767d0-884865-462e4c */
:root {
  --sugarwinkle: #ffc8df;
  --smoked-salmon: #fb856f;
  --lavender: #b767d0;
  --grape-kiss: #884865;
  --sanctum-of-shadows: #462e4c;
}

Tailwind CSS v4

/* Sugarwinkle to Sanctum of Shadows — https://swatchly.xyz/palette/ffc8df-fb856f-b767d0-884865-462e4c */
@theme {
  --color-sugarwinkle: #ffc8df;
  --color-sugarwinkle-50: #fff3f8;
  --color-sugarwinkle-100: #ffe5f0;
  --color-sugarwinkle-200: #ffc8df;
  --color-sugarwinkle-300: #e2b4c7;
  --color-sugarwinkle-400: #c493a8;
  --color-sugarwinkle-500: #a8768c;
  --color-sugarwinkle-600: #8b5c71;
  --color-sugarwinkle-700: #71475a;
  --color-sugarwinkle-800: #5a3546;
  --color-sugarwinkle-900: #472836;
  --color-sugarwinkle-950: #2d1721;
  --color-smoked-salmon: #fb856f;
  --color-smoked-salmon-50: #fff7f5;
  --color-smoked-salmon-100: #ffece8;
  --color-smoked-salmon-200: #ffd3ca;
  --color-smoked-salmon-300: #ffb4a5;
  --color-smoked-salmon-400: #fb856f;
  --color-smoked-salmon-500: #d96753;
  --color-smoked-salmon-600: #b84a37;
  --color-smoked-salmon-700: #983322;
  --color-smoked-salmon-800: #7b2112;
  --color-smoked-salmon-900: #611408;
  --color-smoked-salmon-950: #3f0802;
  --color-lavender: #b767d0;
  --color-lavender-50: #fcf3ff;
  --color-lavender-100: #f9e6ff;
  --color-lavender-200: #f2cbff;
  --color-lavender-300: #eaaaff;
  --color-lavender-400: #d185e9;
  --color-lavender-500: #b767d0;
  --color-lavender-600: #994ab1;
  --color-lavender-700: #7d3493;
  --color-lavender-800: #642277;
  --color-lavender-900: #4e165f;
  --color-lavender-950: #32093e;
  --color-grape-kiss: #884865;
  --color-grape-kiss-50: #fff1f6;
  --color-grape-kiss-100: #ffe2ed;
  --color-grape-kiss-200: #ffc8de;
  --color-grape-kiss-300: #eeb0ca;
  --color-grape-kiss-400: #d490ad;
  --color-grape-kiss-500: #ba7693;
  --color-grape-kiss-600: #9f5d7a;
  --color-grape-kiss-700: #884865;
  --color-grape-kiss-800: #6d364f;
  --color-grape-kiss-900: #56283d;
  --color-grape-kiss-950: #381726;
  --color-sanctum-of-shadows: #462e4c;
  --color-sanctum-of-shadows-50: #fcf1ff;
  --color-sanctum-of-shadows-100: #f6e4fb;
  --color-sanctum-of-shadows-200: #e5cfea;
  --color-sanctum-of-shadows-300: #d0b7d6;
  --color-sanctum-of-shadows-400: #b398ba;
  --color-sanctum-of-shadows-500: #997d9f;
  --color-sanctum-of-shadows-600: #7e6485;
  --color-sanctum-of-shadows-700: #674f6d;
  --color-sanctum-of-shadows-800: #543e59;
  --color-sanctum-of-shadows-900: #462e4c;
  --color-sanctum-of-shadows-950: #2b1e2f;
}