Start generating

Spicy Purple to Primrose color palette

BC3F6CSpicy Purple322A4EPurple Noir6B366EPlumF7F1FFCloud BreakEEBAE3RoseccoD988A1Primrose
Open in generator Export PNG, PDF, ASE…

About this palette

Spicy Purple to Primrose is a 6-color vintage palette: #BC3F6C (Spicy Purple), #322A4E (Purple Noir), #6B366E (Plum), #F7F1FF (Cloud Break), #EEBAE3 (Rosecco), #D988A1 (Primrose). It mixes red, purple, white, pink tones and feels warm overall. The strongest text pairing is #322A4E on #F7F1FF with a contrast ratio of 12.04:1, and 6 of its 15 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Spicy Purplergb(188, 63, 108)hsl(338, 50%, 49%)
Purple Noirrgb(50, 42, 78)hsl(253, 30%, 24%)
Plumrgb(107, 54, 110)hsl(297, 34%, 32%)
Cloud Breakrgb(247, 241, 255)hsl(266, 100%, 97%)
Roseccorgb(238, 186, 227)hsl(313, 60%, 83%)
Primrosergb(217, 136, 161)hsl(341, 52%, 69%)

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.04:1 Super#322A4E on #F7F1FF
  • Aa12.04:1 Super#F7F1FF on #322A4E
  • Aa8.10:1 Very good#322A4E on #EEBAE3
  • Aa8.10:1 Very good#EEBAE3 on #322A4E
  • Aa7.98:1 Very good#6B366E on #F7F1FF
  • Aa7.98:1 Very good#F7F1FF on #6B366E
  • Aa5.37:1 Good#6B366E on #EEBAE3
  • Aa5.37:1 Good#EEBAE3 on #6B366E

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Spicy Purple to Primrose — https://swatchly.xyz/palette/bc3f6c-322a4e-6b366e-f7f1ff-eebae3-d988a1 */
:root {
  --spicy-purple: #bc3f6c;
  --purple-noir: #322a4e;
  --plum: #6b366e;
  --cloud-break: #f7f1ff;
  --rosecco: #eebae3;
  --primrose: #d988a1;
}

Tailwind CSS v4

/* Spicy Purple to Primrose — https://swatchly.xyz/palette/bc3f6c-322a4e-6b366e-f7f1ff-eebae3-d988a1 */
@theme {
  --color-spicy-purple: #bc3f6c;
  --color-spicy-purple-50: #fff1f4;
  --color-spicy-purple-100: #ffe5eb;
  --color-spicy-purple-200: #ffcad7;
  --color-spicy-purple-300: #ffa8c0;
  --color-spicy-purple-400: #f4799f;
  --color-spicy-purple-500: #d95b85;
  --color-spicy-purple-600: #bc3f6c;
  --color-spicy-purple-700: #9c2855;
  --color-spicy-purple-800: #7f1641;
  --color-spicy-purple-900: #650931;
  --color-spicy-purple-950: #43021e;
  --color-purple-noir: #322a4e;
  --color-purple-noir-50: #f5f3ff;
  --color-purple-noir-100: #ebe8ff;
  --color-purple-noir-200: #d8d2f5;
  --color-purple-noir-300: #c1bbe2;
  --color-purple-noir-400: #a29bc5;
  --color-purple-noir-500: #867fa9;
  --color-purple-noir-600: #6b648c;
  --color-purple-noir-700: #554e72;
  --color-purple-noir-800: #413b5a;
  --color-purple-noir-900: #322a4e;
  --color-purple-noir-950: #1e1a2d;
  --color-plum: #6b366e;
  --color-plum-50: #ffefff;
  --color-plum-100: #fee0ff;
  --color-plum-200: #f2c4f4;
  --color-plum-300: #dea9e0;
  --color-plum-400: #bf86c1;
  --color-plum-500: #a269a4;
  --color-plum-600: #844f86;
  --color-plum-700: #6b366e;
  --color-plum-800: #532a55;
  --color-plum-900: #411f43;
  --color-plum-950: #29112b;
  --color-cloud-break: #f7f1ff;
  --color-cloud-break-50: #f7f1ff;
  --color-cloud-break-100: #ece8f1;
  --color-cloud-break-200: #d9d4df;
  --color-cloud-break-300: #c3bec9;
  --color-cloud-break-400: #a49eab;
  --color-cloud-break-500: #898390;
  --color-cloud-break-600: #6e6975;
  --color-cloud-break-700: #58535e;
  --color-cloud-break-800: #44404a;
  --color-cloud-break-900: #343139;
  --color-cloud-break-950: #201e24;
  --color-rosecco: #eebae3;
  --color-rosecco-50: #ffe5f9;
  --color-rosecco-100: #fad6f2;
  --color-rosecco-200: #eebae3;
  --color-rosecco-300: #d5a8cc;
  --color-rosecco-400: #b989af;
  --color-rosecco-500: #9f6f95;
  --color-rosecco-600: #84577c;
  --color-rosecco-700: #6c4465;
  --color-rosecco-800: #583451;
  --color-rosecco-900: #45273f;
  --color-rosecco-950: #2c1628;
  --color-primrose: #d988a1;
  --color-primrose-50: #fff2f5;
  --color-primrose-100: #ffe4eb;
  --color-primrose-200: #ffc8d7;
  --color-primrose-300: #f3acc0;
  --color-primrose-400: #d988a1;
  --color-primrose-500: #ba6d85;
  --color-primrose-600: #9c526b;
  --color-primrose-700: #803d54;
  --color-primrose-800: #672d41;
  --color-primrose-900: #512031;
  --color-primrose-950: #35111e;
}

Similar palettes