Merlot to Strawberry Bonbon Color Palette

About this palette

Merlot to Strawberry Bonbon is a 5-color cool, gradient palette: #66003D (Merlot), #6D5BA4 (Prophet Violet), #AE7DCF (Wisteria), #B3B0FF (Purple Illusion), #F9EAFF (Strawberry Bonbon). It mixes red, purple, white tones and feels cool overall. The strongest text pairing is #66003D on #F9EAFF with a contrast ratio of 11.17:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Merlot	rgb(102, 0, 61)	hsl(324, 100%, 20%)
Prophet Violet	rgb(109, 91, 164)	hsl(255, 29%, 50%)
Wisteria	rgb(174, 125, 207)	hsl(276, 46%, 65%)
Purple Illusion	rgb(179, 176, 255)	hsl(242, 100%, 85%)
Strawberry Bonbon	rgb(249, 234, 255)	hsl(283, 100%, 96%)

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.17:1 Very good#66003D on #F9EAFF
Aa11.17:1 Very good#F9EAFF on #66003D
Aa6.48:1 Good#66003D on #B3B0FF
Aa6.48:1 Good#B3B0FF on #66003D
Aa4.95:1 Good#6D5BA4 on #F9EAFF
Aa4.95:1 Good#F9EAFF on #6D5BA4
Aa4.06:1 Poor#66003D on #AE7DCF
Aa4.06:1 Poor#AE7DCF on #66003D

Color blindness preview

CSS variables

/* Merlot to Strawberry Bonbon — https://swatchly.xyz/palette/66003d-6d5ba4-ae7dcf-b3b0ff-f9eaff */
:root {
  --merlot: #66003d;
  --prophet-violet: #6d5ba4;
  --wisteria: #ae7dcf;
  --purple-illusion: #b3b0ff;
  --strawberry-bonbon: #f9eaff;
}

Tailwind CSS v4

/* Merlot to Strawberry Bonbon — https://swatchly.xyz/palette/66003d-6d5ba4-ae7dcf-b3b0ff-f9eaff */
@theme {
  --color-merlot: #66003d;
  --color-merlot-50: #fff1f6;
  --color-merlot-100: #ffe2ed;
  --color-merlot-200: #ffc4dc;
  --color-merlot-300: #fca0c8;
  --color-merlot-400: #e17daa;
  --color-merlot-500: #c5618f;
  --color-merlot-600: #a74775;
  --color-merlot-700: #8b335f;
  --color-merlot-800: #72234b;
  --color-merlot-900: #66003d;
  --color-merlot-950: #3e0b26;
  --color-prophet-violet: #6d5ba4;
  --color-prophet-violet-50: #f5f3ff;
  --color-prophet-violet-100: #ebe7ff;
  --color-prophet-violet-200: #d8cfff;
  --color-prophet-violet-300: #c2b4f9;
  --color-prophet-violet-400: #a392dd;
  --color-prophet-violet-500: #8776c1;
  --color-prophet-violet-600: #6d5ba4;
  --color-prophet-violet-700: #574687;
  --color-prophet-violet-800: #44356d;
  --color-prophet-violet-900: #342857;
  --color-prophet-violet-950: #21173a;
  --color-wisteria: #ae7dcf;
  --color-wisteria-50: #f7ecff;
  --color-wisteria-100: #f0dbff;
  --color-wisteria-200: #e3bdff;
  --color-wisteria-300: #cea1ed;
  --color-wisteria-400: #ae7dcf;
  --color-wisteria-500: #9464b4;
  --color-wisteria-600: #7a4d98;
  --color-wisteria-700: #643a7e;
  --color-wisteria-800: #502b67;
  --color-wisteria-900: #402053;
  --color-wisteria-950: #2a1338;
  --color-purple-illusion: #b3b0ff;
  --color-purple-illusion-50: #f0f0ff;
  --color-purple-illusion-100: #e3e4ff;
  --color-purple-illusion-200: #cdccff;
  --color-purple-illusion-300: #b3b0ff;
  --color-purple-illusion-400: #9692dd;
  --color-purple-illusion-500: #7c77c2;
  --color-purple-illusion-600: #635ea4;
  --color-purple-illusion-700: #4f4989;
  --color-purple-illusion-800: #3e3870;
  --color-purple-illusion-900: #302b5b;
  --color-purple-illusion-950: #1d193c;
  --color-strawberry-bonbon: #f9eaff;
  --color-strawberry-bonbon-50: #f9eaff;
  --color-strawberry-bonbon-100: #ede3f1;
  --color-strawberry-bonbon-200: #dbd0df;
  --color-strawberry-bonbon-300: #c6b9cb;
  --color-strawberry-bonbon-400: #a89aad;
  --color-strawberry-bonbon-500: #8d8093;
  --color-strawberry-bonbon-600: #736678;
  --color-strawberry-bonbon-700: #5c5061;
  --color-strawberry-bonbon-800: #483e4c;
  --color-strawberry-bonbon-900: #382f3b;
  --color-strawberry-bonbon-950: #231d25;
}