Start generating

Black Cherry to Bubblegum Heart color palette

2F191FBlack CherryD6779DPinking. Fast and Slow6B3425Freshly Roasted Coffee835A8FMuted PurpleFFBBEEBubblegum Heart
Open in generator Export PNG, PDF, ASE…

About this palette

Black Cherry to Bubblegum Heart is a 5-color warm, vintage palette: #2F191F (Black Cherry), #D6779D (Pinking. Fast and Slow), #6B3425 (Freshly Roasted Coffee), #835A8F (Muted Purple), #FFBBEE (Bubblegum Heart). It mixes red, pink, brown, purple tones and feels warm overall. The strongest text pairing is #2F191F on #FFBBEE with a contrast ratio of 10.62:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Black Cherryrgb(47, 25, 31)hsl(344, 31%, 14%)
Pinking. Fast and Slowrgb(214, 119, 157)hsl(336, 54%, 65%)
Freshly Roasted Coffeergb(107, 52, 37)hsl(13, 49%, 28%)
Muted Purplergb(131, 90, 143)hsl(286, 23%, 46%)
Bubblegum Heartrgb(255, 187, 238)hsl(315, 100%, 87%)

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.

  • Aa10.62:1 Very good#2F191F on #FFBBEE
  • Aa10.62:1 Very good#FFBBEE on #2F191F
  • Aa6.34:1 Good#6B3425 on #FFBBEE
  • Aa6.34:1 Good#FFBBEE on #6B3425
  • Aa5.46:1 Good#2F191F on #D6779D
  • Aa5.46:1 Good#D6779D on #2F191F
  • Aa3.55:1 Poor#835A8F on #FFBBEE
  • Aa3.55:1 Poor#FFBBEE on #835A8F

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Black Cherry to Bubblegum Heart — https://swatchly.xyz/palette/2f191f-d6779d-6b3425-835a8f-ffbbee */
:root {
  --black-cherry: #2f191f;
  --pinking-fast-and-slow: #d6779d;
  --freshly-roasted-coffee: #6b3425;
  --muted-purple: #835a8f;
  --bubblegum-heart: #ffbbee;
}

Tailwind CSS v4

/* Black Cherry to Bubblegum Heart — https://swatchly.xyz/palette/2f191f-d6779d-6b3425-835a8f-ffbbee */
@theme {
  --color-black-cherry: #2f191f;
  --color-black-cherry-50: #fff1f4;
  --color-black-cherry-100: #f9e5ea;
  --color-black-cherry-200: #e8d1d6;
  --color-black-cherry-300: #d3b9bf;
  --color-black-cherry-400: #b5999f;
  --color-black-cherry-500: #9a7e84;
  --color-black-cherry-600: #7f646a;
  --color-black-cherry-700: #674e54;
  --color-black-cherry-800: #523d42;
  --color-black-cherry-900: #402e33;
  --color-black-cherry-950: #2f191f;
  --color-pinking-fast-and-slow: #d6779d;
  --color-pinking-fast-and-slow-50: #ffedf3;
  --color-pinking-fast-and-slow-100: #ffdce8;
  --color-pinking-fast-and-slow-200: #ffbcd4;
  --color-pinking-fast-and-slow-300: #f39cbd;
  --color-pinking-fast-and-slow-400: #d6779d;
  --color-pinking-fast-and-slow-500: #b95d83;
  --color-pinking-fast-and-slow-600: #9c456a;
  --color-pinking-fast-and-slow-700: #803254;
  --color-pinking-fast-and-slow-800: #682442;
  --color-pinking-fast-and-slow-900: #541934;
  --color-pinking-fast-and-slow-950: #380d21;
  --color-freshly-roasted-coffee: #6b3425;
  --color-freshly-roasted-coffee-50: #fff2ee;
  --color-freshly-roasted-coffee-100: #ffe5dd;
  --color-freshly-roasted-coffee-200: #fdcabc;
  --color-freshly-roasted-coffee-300: #ebb2a2;
  --color-freshly-roasted-coffee-400: #cf9281;
  --color-freshly-roasted-coffee-500: #b47665;
  --color-freshly-roasted-coffee-600: #985d4d;
  --color-freshly-roasted-coffee-700: #7d4839;
  --color-freshly-roasted-coffee-800: #6b3425;
  --color-freshly-roasted-coffee-900: #51291e;
  --color-freshly-roasted-coffee-950: #351810;
  --color-muted-purple: #835a8f;
  --color-muted-purple-50: #fcf1ff;
  --color-muted-purple-100: #f8e2ff;
  --color-muted-purple-200: #eccaf6;
  --color-muted-purple-300: #d7b1e3;
  --color-muted-purple-400: #ba90c6;
  --color-muted-purple-500: #9e74ab;
  --color-muted-purple-600: #835a8f;
  --color-muted-purple-700: #6a4574;
  --color-muted-purple-800: #54345d;
  --color-muted-purple-900: #42264a;
  --color-muted-purple-950: #2a1630;
  --color-bubblegum-heart: #ffbbee;
  --color-bubblegum-heart-50: #ffedfa;
  --color-bubblegum-heart-100: #ffdcf6;
  --color-bubblegum-heart-200: #ffbbee;
  --color-bubblegum-heart-300: #e3a9d4;
  --color-bubblegum-heart-400: #c688b7;
  --color-bubblegum-heart-500: #ab6c9c;
  --color-bubblegum-heart-600: #8e5381;
  --color-bubblegum-heart-700: #743f69;
  --color-bubblegum-heart-800: #5e2f54;
  --color-bubblegum-heart-900: #4a2241;
  --color-bubblegum-heart-950: #30132a;
}

Similar palettes