Bubblegum Heart to Deep Space Royal color palette

FFBBEBBubblegum Heart D2AA3FHaystack 7074EAPan Purple 007854Greasy Greens 313179Deep Space Royal

About this palette

Bubblegum Heart to Deep Space Royal is a 5-color cool palette: #FFBBEB (Bubblegum Heart), #D2AA3F (Haystack), #7074EA (Pan Purple), #007854 (Greasy Greens), #313179 (Deep Space Royal). It mixes pink, yellow, purple, green tones and feels cool overall. The strongest text pairing is #FFBBEB on #313179 with a contrast ratio of 7.35:1, and 2 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Bubblegum Heart	rgb(255, 187, 235)	hsl(318, 100%, 87%)
Haystack	rgb(210, 170, 63)	hsl(44, 62%, 54%)
Pan Purple	rgb(112, 116, 234)	hsl(238, 74%, 68%)
Greasy Greens	rgb(0, 120, 84)	hsl(162, 100%, 24%)
Deep Space Royal	rgb(49, 49, 121)	hsl(240, 42%, 33%)

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.

Aa7.35:1 Very good#FFBBEB on #313179
Aa7.35:1 Very good#313179 on #FFBBEB
Aa5.18:1 Good#D2AA3F on #313179
Aa5.18:1 Good#313179 on #D2AA3F
Aa3.55:1 Poor#FFBBEB on #007854
Aa3.55:1 Poor#007854 on #FFBBEB

Color blindness preview

CSS variables

/* Bubblegum Heart to Deep Space Royal — https://swatchly.xyz/palette/ffbbeb-d2aa3f-7074ea-007854-313179 */
:root {
  --bubblegum-heart: #ffbbeb;
  --haystack: #d2aa3f;
  --pan-purple: #7074ea;
  --greasy-greens: #007854;
  --deep-space-royal: #313179;
}

Tailwind CSS v4

/* Bubblegum Heart to Deep Space Royal — https://swatchly.xyz/palette/ffbbeb-d2aa3f-7074ea-007854-313179 */
@theme {
  --color-bubblegum-heart: #ffbbeb;
  --color-bubblegum-heart-50: #ffecf9;
  --color-bubblegum-heart-100: #ffdcf4;
  --color-bubblegum-heart-200: #ffbbeb;
  --color-bubblegum-heart-300: #e3a9d2;
  --color-bubblegum-heart-400: #c688b4;
  --color-bubblegum-heart-500: #ab6d9a;
  --color-bubblegum-heart-600: #8e547f;
  --color-bubblegum-heart-700: #753f67;
  --color-bubblegum-heart-800: #5e2f52;
  --color-bubblegum-heart-900: #4a2340;
  --color-bubblegum-heart-950: #301329;
  --color-haystack: #d2aa3f;
  --color-haystack-50: #fffaed;
  --color-haystack-100: #fff2d2;
  --color-haystack-200: #fadf9c;
  --color-haystack-300: #e9c97b;
  --color-haystack-400: #d2aa3f;
  --color-haystack-500: #b28c16;
  --color-haystack-600: #906f00;
  --color-haystack-700: #725700;
  --color-haystack-800: #584300;
  --color-haystack-900: #433200;
  --color-haystack-950: #291d00;
  --color-pan-purple: #7074ea;
  --color-pan-purple-50: #f2f4ff;
  --color-pan-purple-100: #e6e9ff;
  --color-pan-purple-200: #cdd3ff;
  --color-pan-purple-300: #b1baff;
  --color-pan-purple-400: #8c93ff;
  --color-pan-purple-500: #7074ea;
  --color-pan-purple-600: #5859ca;
  --color-pan-purple-700: #4543aa;
  --color-pan-purple-800: #35318c;
  --color-pan-purple-900: #282471;
  --color-pan-purple-950: #18144c;
  --color-greasy-greens: #007854;
  --color-greasy-greens-50: #dcffed;
  --color-greasy-greens-100: #c1f9de;
  --color-greasy-greens-200: #a2e7c7;
  --color-greasy-greens-300: #81d1ad;
  --color-greasy-greens-400: #56b18b;
  --color-greasy-greens-500: #32946f;
  --color-greasy-greens-600: #007854;
  --color-greasy-greens-700: #005f42;
  --color-greasy-greens-800: #004b33;
  --color-greasy-greens-900: #003a27;
  --color-greasy-greens-950: #002517;
  --color-deep-space-royal: #313179;
  --color-deep-space-royal-50: #f3f4ff;
  --color-deep-space-royal-100: #e6eaff;
  --color-deep-space-royal-200: #ced4ff;
  --color-deep-space-royal-300: #b1baff;
  --color-deep-space-royal-400: #8f97e6;
  --color-deep-space-royal-500: #737ac9;
  --color-deep-space-royal-600: #595fa9;
  --color-deep-space-royal-700: #44488a;
  --color-deep-space-royal-800: #313179;
  --color-deep-space-royal-900: #262757;
  --color-deep-space-royal-950: #161739;
}