Strawberry Bonbon to Siren Color Palette

About this palette

Strawberry Bonbon to Siren is a 5-color warm, vintage, gradient palette: #FCEDFF (Strawberry Bonbon), #E5A4C8 (Think Pink), #B584A3 (Voila!), #6C527C (Berry Jam), #6F253E (Siren). It mixes white, pink, purple, red tones and feels warm overall. The strongest text pairing is #FCEDFF on #6F253E with a contrast ratio of 9.30:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Strawberry Bonbon	rgb(252, 237, 255)	hsl(290, 100%, 96%)
Think Pink	rgb(229, 164, 200)	hsl(327, 56%, 77%)
Voila!	rgb(181, 132, 163)	hsl(322, 25%, 61%)
Berry Jam	rgb(108, 82, 124)	hsl(277, 20%, 40%)
Siren	rgb(111, 37, 62)	hsl(340, 50%, 29%)

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.30:1 Very good#FCEDFF on #6F253E
Aa9.30:1 Very good#6F253E on #FCEDFF
Aa5.96:1 Good#FCEDFF on #6C527C
Aa5.96:1 Good#6C527C on #FCEDFF
Aa5.21:1 Good#E5A4C8 on #6F253E
Aa5.21:1 Good#6F253E on #E5A4C8
Aa3.38:1 Poor#B584A3 on #6F253E
Aa3.38:1 Poor#6F253E on #B584A3

Color blindness preview

CSS variables

/* Strawberry Bonbon to Siren — https://swatchly.xyz/palette/fcedff-e5a4c8-b584a3-6c527c-6f253e */
:root {
  --strawberry-bonbon: #fcedff;
  --think-pink: #e5a4c8;
  --voila: #b584a3;
  --berry-jam: #6c527c;
  --siren: #6f253e;
}

Tailwind CSS v4

/* Strawberry Bonbon to Siren — https://swatchly.xyz/palette/fcedff-e5a4c8-b584a3-6c527c-6f253e */
@theme {
  --color-strawberry-bonbon: #fcedff;
  --color-strawberry-bonbon-50: #fcedff;
  --color-strawberry-bonbon-100: #efe6f1;
  --color-strawberry-bonbon-200: #ddd2df;
  --color-strawberry-bonbon-300: #c7bbca;
  --color-strawberry-bonbon-400: #a99cac;
  --color-strawberry-bonbon-500: #8e8191;
  --color-strawberry-bonbon-600: #736776;
  --color-strawberry-bonbon-700: #5c515e;
  --color-strawberry-bonbon-800: #483e4a;
  --color-strawberry-bonbon-900: #382f3a;
  --color-strawberry-bonbon-950: #231d24;
  --color-think-pink: #e5a4c8;
  --color-think-pink-50: #ffecf6;
  --color-think-pink-100: #ffdbee;
  --color-think-pink-200: #f4c1dd;
  --color-think-pink-300: #e5a4c8;
  --color-think-pink-400: #c487a9;
  --color-think-pink-500: #a96c8f;
  --color-think-pink-600: #8d5475;
  --color-think-pink-700: #73405e;
  --color-think-pink-800: #5d304b;
  --color-think-pink-900: #4a243a;
  --color-think-pink-950: #301425;
  --color-voila: #b584a3;
  --color-voila-50: #ffeaf6;
  --color-voila-100: #fcd9ee;
  --color-voila-200: #eac1da;
  --color-voila-300: #d4a7c3;
  --color-voila-400: #b584a3;
  --color-voila-500: #9b6b8a;
  --color-voila-600: #805470;
  --color-voila-700: #69415b;
  --color-voila-800: #543248;
  --color-voila-900: #432639;
  --color-voila-950: #2d1725;
  --color-berry-jam: #6c527c;
  --color-berry-jam-50: #faf2ff;
  --color-berry-jam-100: #f4e4ff;
  --color-berry-jam-200: #e5d0f3;
  --color-berry-jam-300: #d2bae1;
  --color-berry-jam-400: #b59ac6;
  --color-berry-jam-500: #9b80ad;
  --color-berry-jam-600: #826792;
  --color-berry-jam-700: #6c527c;
  --color-berry-jam-800: #553f62;
  --color-berry-jam-900: #422f4e;
  --color-berry-jam-950: #2a1d32;
  --color-siren: #6f253e;
  --color-siren-50: #fff1f4;
  --color-siren-100: #ffe3e9;
  --color-siren-200: #ffc6d3;
  --color-siren-300: #f4a8bc;
  --color-siren-400: #d8869c;
  --color-siren-500: #bc6a81;
  --color-siren-600: #9e5067;
  --color-siren-700: #823c51;
  --color-siren-800: #6f253e;
  --color-siren-900: #531f30;
  --color-siren-950: #37111d;
}