Fresh Gum to Haunted Hills color palette

FFB0E4Fresh Gum 9A92FFPerrywinkle 8D8600Captain Kirk 554F00Ayahuasca Vine 003517Haunted Hills

About this palette

Fresh Gum to Haunted Hills is a 5-color warm, earthy palette: #FFB0E4 (Fresh Gum), #9A92FF (Perrywinkle), #8D8600 (Captain Kirk), #554F00 (Ayahuasca Vine), #003517 (Haunted Hills). It mixes pink, purple, yellow, brown, green tones and feels warm overall. The strongest text pairing is #FFB0E4 on #003517 with a contrast ratio of 8.27:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Fresh Gum	rgb(255, 176, 228)	hsl(321, 100%, 85%)
Perrywinkle	rgb(154, 146, 255)	hsl(244, 100%, 79%)
Captain Kirk	rgb(141, 134, 0)	hsl(57, 100%, 28%)
Ayahuasca Vine	rgb(85, 79, 0)	hsl(56, 100%, 17%)
Haunted Hills	rgb(0, 53, 23)	hsl(146, 100%, 10%)

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.

Aa8.27:1 Very good#FFB0E4 on #003517
Aa8.27:1 Very good#003517 on #FFB0E4
Aa5.21:1 Good#9A92FF on #003517
Aa5.21:1 Good#003517 on #9A92FF
Aa5.02:1 Good#FFB0E4 on #554F00
Aa5.02:1 Good#554F00 on #FFB0E4
Aa3.64:1 Poor#8D8600 on #003517
Aa3.64:1 Poor#003517 on #8D8600

Color blindness preview

CSS variables

/* Fresh Gum to Haunted Hills — https://swatchly.xyz/palette/ffb0e4-9a92ff-8d8600-554f00-003517 */
:root {
  --fresh-gum: #ffb0e4;
  --perrywinkle: #9a92ff;
  --captain-kirk: #8d8600;
  --ayahuasca-vine: #554f00;
  --haunted-hills: #003517;
}

Tailwind CSS v4

/* Fresh Gum to Haunted Hills — https://swatchly.xyz/palette/ffb0e4-9a92ff-8d8600-554f00-003517 */
@theme {
  --color-fresh-gum: #ffb0e4;
  --color-fresh-gum-50: #ffe5f5;
  --color-fresh-gum-100: #ffd3ef;
  --color-fresh-gum-200: #ffb0e4;
  --color-fresh-gum-300: #e49fcc;
  --color-fresh-gum-400: #c87fb0;
  --color-fresh-gum-500: #ae6596;
  --color-fresh-gum-600: #924d7c;
  --color-fresh-gum-700: #783a65;
  --color-fresh-gum-800: #622b52;
  --color-fresh-gum-900: #4e1f40;
  --color-fresh-gum-950: #321129;
  --color-perrywinkle: #9a92ff;
  --color-perrywinkle-50: #f4f4ff;
  --color-perrywinkle-100: #e9eaff;
  --color-perrywinkle-200: #d3d3ff;
  --color-perrywinkle-300: #bbb9ff;
  --color-perrywinkle-400: #9a92ff;
  --color-perrywinkle-500: #7f76e0;
  --color-perrywinkle-600: #665bc0;
  --color-perrywinkle-700: #5144a1;
  --color-perrywinkle-800: #3f3384;
  --color-perrywinkle-900: #30256a;
  --color-perrywinkle-950: #1d1547;
  --color-captain-kirk: #8d8600;
  --color-captain-kirk-50: #faf8c0;
  --color-captain-kirk-100: #f0eeae;
  --color-captain-kirk-200: #ddda8d;
  --color-captain-kirk-300: #c7c369;
  --color-captain-kirk-400: #a9a239;
  --color-captain-kirk-500: #8d8600;
  --color-captain-kirk-600: #716c00;
  --color-captain-kirk-700: #5a5500;
  --color-captain-kirk-800: #464300;
  --color-captain-kirk-900: #363300;
  --color-captain-kirk-950: #222000;
  --color-ayahuasca-vine: #554f00;
  --color-ayahuasca-vine-50: #faf8d2;
  --color-ayahuasca-vine-100: #f0eec4;
  --color-ayahuasca-vine-200: #dcd9a6;
  --color-ayahuasca-vine-300: #c5c187;
  --color-ayahuasca-vine-400: #a5a05f;
  --color-ayahuasca-vine-500: #888340;
  --color-ayahuasca-vine-600: #6c6726;
  --color-ayahuasca-vine-700: #554f00;
  --color-ayahuasca-vine-800: #423d06;
  --color-ayahuasca-vine-900: #332f01;
  --color-ayahuasca-vine-950: #1f1d00;
  --color-haunted-hills: #003517;
  --color-haunted-hills-50: #e1fee8;
  --color-haunted-hills-100: #d5f5dc;
  --color-haunted-hills-200: #bde3c6;
  --color-haunted-hills-300: #a2cdad;
  --color-haunted-hills-400: #7ead8a;
  --color-haunted-hills-500: #60906d;
  --color-haunted-hills-600: #457452;
  --color-haunted-hills-700: #305a3d;
  --color-haunted-hills-800: #20442c;
  --color-haunted-hills-900: #003517;
  --color-haunted-hills-950: #0a1e10;
}