Strawberry Buttercream to Imperial color palette

About this palette

Strawberry Buttercream to Imperial is a 5-color cool palette: #FFB0F5 (Strawberry Buttercream), #C38BFF (Illicit Purple), #251F45 (Black Market), #B3526E (Extravagant Blush), #6B236A (Imperial). It mixes pink, purple, red tones and feels cool overall. The strongest text pairing is #FFB0F5 on #251F45 with a contrast ratio of 9.39:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Strawberry Buttercreamrgb(255, 176, 245)hsl(308, 100%, 85%)
Illicit Purplergb(195, 139, 255)hsl(269, 100%, 77%)
Black Marketrgb(37, 31, 69)hsl(249, 38%, 20%)
Extravagant Blushrgb(179, 82, 110)hsl(343, 39%, 51%)
Imperialrgb(107, 35, 106)hsl(301, 51%, 28%)

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.39:1 Very good#FFB0F5 on #251F45
  • Aa9.39:1 Very good#251F45 on #FFB0F5
  • Aa6.22:1 Good#C38BFF on #251F45
  • Aa6.22:1 Good#251F45 on #C38BFF
  • Aa6.16:1 Good#FFB0F5 on #6B236A
  • Aa6.16:1 Good#6B236A on #FFB0F5
  • Aa4.08:1 Poor#C38BFF on #6B236A
  • Aa4.08:1 Poor#6B236A on #C38BFF

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Strawberry Buttercream to Imperial — https://swatchly.xyz/palette/ffb0f5-c38bff-251f45-b3526e-6b236a */
:root {
  --strawberry-buttercream: #ffb0f5;
  --illicit-purple: #c38bff;
  --black-market: #251f45;
  --extravagant-blush: #b3526e;
  --imperial: #6b236a;
}

Tailwind CSS v4

/* Strawberry Buttercream to Imperial — https://swatchly.xyz/palette/ffb0f5-c38bff-251f45-b3526e-6b236a */
@theme {
  --color-strawberry-buttercream: #ffb0f5;
  --color-strawberry-buttercream-50: #ffe7fb;
  --color-strawberry-buttercream-100: #ffd4f9;
  --color-strawberry-buttercream-200: #ffb0f5;
  --color-strawberry-buttercream-300: #e49fdb;
  --color-strawberry-buttercream-400: #c87fbf;
  --color-strawberry-buttercream-500: #ad64a5;
  --color-strawberry-buttercream-600: #914c8a;
  --color-strawberry-buttercream-700: #773871;
  --color-strawberry-buttercream-800: #61295c;
  --color-strawberry-buttercream-900: #4d1d48;
  --color-strawberry-buttercream-950: #32102f;
  --color-illicit-purple: #c38bff;
  --color-illicit-purple-50: #faf6ff;
  --color-illicit-purple-100: #f4ebff;
  --color-illicit-purple-200: #e7d4ff;
  --color-illicit-purple-300: #d8b7ff;
  --color-illicit-purple-400: #c38bff;
  --color-illicit-purple-500: #a56ede;
  --color-illicit-purple-600: #8851be;
  --color-illicit-purple-700: #6e3a9f;
  --color-illicit-purple-800: #572881;
  --color-illicit-purple-900: #441b67;
  --color-illicit-purple-950: #2a0d43;
  --color-black-market: #251f45;
  --color-black-market-50: #f4f4ff;
  --color-black-market-100: #eae8ff;
  --color-black-market-200: #d5d3f8;
  --color-black-market-300: #bebce5;
  --color-black-market-400: #9f9bc9;
  --color-black-market-500: #8581af;
  --color-black-market-600: #6c6894;
  --color-black-market-700: #57537b;
  --color-black-market-800: #464266;
  --color-black-market-900: #373453;
  --color-black-market-950: #251f45;
  --color-extravagant-blush: #b3526e;
  --color-extravagant-blush-50: #fff1f4;
  --color-extravagant-blush-100: #ffe6eb;
  --color-extravagant-blush-200: #ffccd7;
  --color-extravagant-blush-300: #ffabbf;
  --color-extravagant-blush-400: #e888a1;
  --color-extravagant-blush-500: #cf6c87;
  --color-extravagant-blush-600: #b3526e;
  --color-extravagant-blush-700: #943b56;
  --color-extravagant-blush-800: #782942;
  --color-extravagant-blush-900: #5f1b32;
  --color-extravagant-blush-950: #3e0d1e;
  --color-imperial: #6b236a;
  --color-imperial-50: #fff0fe;
  --color-imperial-100: #ffe0fd;
  --color-imperial-200: #fdc0f9;
  --color-imperial-300: #eba7e7;
  --color-imperial-400: #cf84cc;
  --color-imperial-500: #b468b1;
  --color-imperial-600: #984e95;
  --color-imperial-700: #7e3a7c;
  --color-imperial-800: #6b236a;
  --color-imperial-900: #511e50;
  --color-imperial-950: #351035;
}

Similar palettes