Bubblegum Heart to Secret Passage color palette

FFB6E6Bubblegum Heart 15AECAAquarius 8B7941Capers 005261Raging Thunderstorm 302300Secret Passage

About this palette

Bubblegum Heart to Secret Passage is a 5-color warm, vintage palette: #FFB6E6 (Bubblegum Heart), #15AECA (Aquarius), #8B7941 (Capers), #005261 (Raging Thunderstorm), #302300 (Secret Passage). It mixes pink, blue, yellow, brown tones and feels warm overall. The strongest text pairing is #FFB6E6 on #302300 with a contrast ratio of 9.58:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Bubblegum Heart	rgb(255, 182, 230)	hsl(321, 100%, 86%)
Aquarius	rgb(21, 174, 202)	hsl(189, 81%, 44%)
Capers	rgb(139, 121, 65)	hsl(45, 36%, 40%)
Raging Thunderstorm	rgb(0, 82, 97)	hsl(189, 100%, 19%)
Secret Passage	rgb(48, 35, 0)	hsl(44, 100%, 9%)

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.58:1 Very good#FFB6E6 on #302300
Aa9.58:1 Very good#302300 on #FFB6E6
Aa5.81:1 Good#15AECA on #302300
Aa5.81:1 Good#302300 on #15AECA
Aa5.50:1 Good#FFB6E6 on #005261
Aa5.50:1 Good#005261 on #FFB6E6
Aa3.59:1 Poor#8B7941 on #302300
Aa3.59:1 Poor#302300 on #8B7941

Color blindness preview

CSS variables

/* Bubblegum Heart to Secret Passage — https://swatchly.xyz/palette/ffb6e6-15aeca-8b7941-005261-302300 */
:root {
  --bubblegum-heart: #ffb6e6;
  --aquarius: #15aeca;
  --capers: #8b7941;
  --raging-thunderstorm: #005261;
  --secret-passage: #302300;
}

Tailwind CSS v4

/* Bubblegum Heart to Secret Passage — https://swatchly.xyz/palette/ffb6e6-15aeca-8b7941-005261-302300 */
@theme {
  --color-bubblegum-heart: #ffb6e6;
  --color-bubblegum-heart-50: #ffe9f7;
  --color-bubblegum-heart-100: #ffd8f1;
  --color-bubblegum-heart-200: #ffb6e6;
  --color-bubblegum-heart-300: #e3a5ce;
  --color-bubblegum-heart-400: #c784b1;
  --color-bubblegum-heart-500: #ac6996;
  --color-bubblegum-heart-600: #90517c;
  --color-bubblegum-heart-700: #763d65;
  --color-bubblegum-heart-800: #602e51;
  --color-bubblegum-heart-900: #4c213f;
  --color-bubblegum-heart-950: #311228;
  --color-aquarius: #15aeca;
  --color-aquarius-50: #dff8ff;
  --color-aquarius-100: #c0f2ff;
  --color-aquarius-200: #8ae3f9;
  --color-aquarius-300: #62cde6;
  --color-aquarius-400: #15aeca;
  --color-aquarius-500: #0091aa;
  --color-aquarius-600: #007589;
  --color-aquarius-700: #005d6e;
  --color-aquarius-800: #004957;
  --color-aquarius-900: #003944;
  --color-aquarius-950: #00242c;
  --color-capers: #8b7941;
  --color-capers-50: #fdf3d2;
  --color-capers-100: #f3e6c1;
  --color-capers-200: #dfd0a4;
  --color-capers-300: #c8b885;
  --color-capers-400: #a8965f;
  --color-capers-500: #8b7941;
  --color-capers-600: #72612b;
  --color-capers-700: #5c4d1b;
  --color-capers-800: #493c0f;
  --color-capers-900: #3a2e07;
  --color-capers-950: #251d03;
  --color-raging-thunderstorm: #005261;
  --color-raging-thunderstorm-50: #e5f9ff;
  --color-raging-thunderstorm-100: #cbf3fe;
  --color-raging-thunderstorm-200: #b0e1ee;
  --color-raging-thunderstorm-300: #95cddb;
  --color-raging-thunderstorm-400: #71afbf;
  --color-raging-thunderstorm-500: #5395a5;
  --color-raging-thunderstorm-600: #397b8a;
  --color-raging-thunderstorm-700: #256473;
  --color-raging-thunderstorm-800: #005261;
  --color-raging-thunderstorm-900: #093f4a;
  --color-raging-thunderstorm-950: #022830;
  --color-secret-passage: #302300;
  --color-secret-passage-50: #fdf4df;
  --color-secret-passage-100: #f5ead3;
  --color-secret-passage-200: #e3d7ba;
  --color-secret-passage-300: #cdc0a0;
  --color-secret-passage-400: #afa07d;
  --color-secret-passage-500: #958662;
  --color-secret-passage-600: #7b6d4a;
  --color-secret-passage-700: #655737;
  --color-secret-passage-800: #514529;
  --color-secret-passage-900: #41371e;
  --color-secret-passage-950: #302300;
}