Telemagenta to Bubblegum Color Palette

About this palette

Telemagenta to Bubblegum is a 5-color vibrant, cool, neon palette: #B528C9 (Telemagenta), #009674 (Pool Table), #929B00 (Papyrus), #00BAE0 (Blue Bikini), #F98AFF (Bubblegum). It mixes pink, turquoise, green, blue tones and feels cool overall. The strongest text pairing is #B528C9 on #F98AFF with a contrast ratio of 2.46:1, and 0 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Telemagenta	rgb(181, 40, 201)	hsl(293, 67%, 47%)
Pool Table	rgb(0, 150, 116)	hsl(166, 100%, 29%)
Papyrus	rgb(146, 155, 0)	hsl(63, 100%, 30%)
Blue Bikini	rgb(0, 186, 224)	hsl(190, 100%, 44%)
Bubblegum	rgb(249, 138, 255)	hsl(297, 100%, 77%)

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.

Color blindness preview

CSS variables

/* Telemagenta to Bubblegum — https://swatchly.xyz/palette/b528c9-009674-929b00-00bae0-f98aff */
:root {
  --telemagenta: #b528c9;
  --pool-table: #009674;
  --papyrus: #929b00;
  --blue-bikini: #00bae0;
  --bubblegum: #f98aff;
}

Tailwind CSS v4

/* Telemagenta to Bubblegum — https://swatchly.xyz/palette/b528c9-009674-929b00-00bae0-f98aff */
@theme {
  --color-telemagenta: #b528c9;
  --color-telemagenta-50: #fdf0ff;
  --color-telemagenta-100: #fce4ff;
  --color-telemagenta-200: #f8c9ff;
  --color-telemagenta-300: #f4a6ff;
  --color-telemagenta-400: #ea6dfd;
  --color-telemagenta-500: #d04be4;
  --color-telemagenta-600: #b528c9;
  --color-telemagenta-700: #9500a8;
  --color-telemagenta-800: #760085;
  --color-telemagenta-900: #5b0067;
  --color-telemagenta-950: #3b0043;
  --color-pool-table: #009674;
  --color-pool-table-50: #d6ffef;
  --color-pool-table-100: #b7fae1;
  --color-pool-table-200: #96e8ca;
  --color-pool-table-300: #71d2b1;
  --color-pool-table-400: #3fb390;
  --color-pool-table-500: #009674;
  --color-pool-table-600: #00795d;
  --color-pool-table-700: #006049;
  --color-pool-table-800: #004c39;
  --color-pool-table-900: #003b2c;
  --color-pool-table-950: #00251b;
  --color-papyrus: #929b00;
  --color-papyrus-50: #f6fec1;
  --color-papyrus-100: #eef7b3;
  --color-papyrus-200: #dde695;
  --color-papyrus-300: #c8d273;
  --color-papyrus-400: #abb542;
  --color-papyrus-500: #929b00;
  --color-papyrus-600: #757d00;
  --color-papyrus-700: #5d6300;
  --color-papyrus-800: #484c00;
  --color-papyrus-900: #363a00;
  --color-papyrus-950: #212300;
  --color-blue-bikini: #00bae0;
  --color-blue-bikini-50: #ecfaff;
  --color-blue-bikini-100: #d5f5ff;
  --color-blue-bikini-200: #a1e9ff;
  --color-blue-bikini-300: #69d7f7;
  --color-blue-bikini-400: #00bae0;
  --color-blue-bikini-500: #009bbb;
  --color-blue-bikini-600: #007c97;
  --color-blue-bikini-700: #006278;
  --color-blue-bikini-800: #004c5e;
  --color-blue-bikini-900: #003a48;
  --color-blue-bikini-950: #00242d;
  --color-bubblegum: #f98aff;
  --color-bubblegum-50: #ffebff;
  --color-bubblegum-100: #fedaff;
  --color-bubblegum-200: #fcb7ff;
  --color-bubblegum-300: #f98aff;
  --color-bubblegum-400: #d66ddc;
  --color-bubblegum-500: #bb4fc1;
  --color-bubblegum-600: #9d34a4;
  --color-bubblegum-700: #821e88;
  --color-bubblegum-800: #690e6f;
  --color-bubblegum-900: #540459;
  --color-bubblegum-950: #37003b;
}