Herbal Vapours to Bunny Tail Color Palette

About this palette

Herbal Vapours to Bunny Tail is a 5-color pastel, light, warm palette: #E5FFCA (Herbal Vapours), #EECDFF (Bubblegum Crisis), #FBD1A8 (Peach Beach), #FDB5A0 (Persicus), #FFE0F5 (Bunny Tail). It mixes green, purple, orange, pink tones and feels warm overall. The strongest text pairing is #E5FFCA on #FDB5A0 with a contrast ratio of 1.59:1, and 0 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Herbal Vapours	rgb(229, 255, 202)	hsl(89, 100%, 90%)
Bubblegum Crisis	rgb(238, 205, 255)	hsl(280, 100%, 90%)
Peach Beach	rgb(251, 209, 168)	hsl(30, 91%, 82%)
Persicus	rgb(253, 181, 160)	hsl(14, 96%, 81%)
Bunny Tail	rgb(255, 224, 245)	hsl(319, 100%, 94%)

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

/* Herbal Vapours to Bunny Tail — https://swatchly.xyz/palette/e5ffca-eecdff-fbd1a8-fdb5a0-ffe0f5 */
:root {
  --herbal-vapours: #e5ffca;
  --bubblegum-crisis: #eecdff;
  --peach-beach: #fbd1a8;
  --persicus: #fdb5a0;
  --bunny-tail: #ffe0f5;
}

Tailwind CSS v4

/* Herbal Vapours to Bunny Tail — https://swatchly.xyz/palette/e5ffca-eecdff-fbd1a8-fdb5a0-ffe0f5 */
@theme {
  --color-herbal-vapours: #e5ffca;
  --color-herbal-vapours-50: #e5ffca;
  --color-herbal-vapours-100: #e1f1d1;
  --color-herbal-vapours-200: #ccdfb8;
  --color-herbal-vapours-300: #b4c99e;
  --color-herbal-vapours-400: #93aa7b;
  --color-herbal-vapours-500: #788f5f;
  --color-herbal-vapours-600: #5f7446;
  --color-herbal-vapours-700: #495d32;
  --color-herbal-vapours-800: #384924;
  --color-herbal-vapours-900: #2a3819;
  --color-herbal-vapours-950: #19230c;
  --color-bubblegum-crisis: #eecdff;
  --color-bubblegum-crisis-50: #fbf5ff;
  --color-bubblegum-crisis-100: #f7e8ff;
  --color-bubblegum-crisis-200: #eecdff;
  --color-bubblegum-crisis-300: #d3b8e1;
  --color-bubblegum-crisis-400: #b597c4;
  --color-bubblegum-crisis-500: #997aa8;
  --color-bubblegum-crisis-600: #7d608b;
  --color-bubblegum-crisis-700: #644a71;
  --color-bubblegum-crisis-800: #4f385a;
  --color-bubblegum-crisis-900: #3d2a47;
  --color-bubblegum-crisis-950: #27192e;
  --color-peach-beach: #fbd1a8;
  --color-peach-beach-50: #fff5eb;
  --color-peach-beach-100: #ffe9d4;
  --color-peach-beach-200: #fbd1a8;
  --color-peach-beach-300: #debc9a;
  --color-peach-beach-400: #c19b75;
  --color-peach-beach-500: #a57f58;
  --color-peach-beach-600: #88643f;
  --color-peach-beach-700: #6f4e2b;
  --color-peach-beach-800: #583b1d;
  --color-peach-beach-900: #452d13;
  --color-peach-beach-950: #2c1b08;
  --color-persicus: #fdb5a0;
  --color-persicus-50: #fff7f5;
  --color-persicus-100: #ffece7;
  --color-persicus-200: #ffd3c6;
  --color-persicus-300: #fdb5a0;
  --color-persicus-400: #d79682;
  --color-persicus-500: #ba7864;
  --color-persicus-600: #9c5c4a;
  --color-persicus-700: #7f4635;
  --color-persicus-800: #653325;
  --color-persicus-900: #4f2519;
  --color-persicus-950: #33150d;
  --color-bunny-tail: #ffe0f5;
  --color-bunny-tail-50: #ffeffa;
  --color-bunny-tail-100: #ffe0f5;
  --color-bunny-tail-200: #e6cfdf;
  --color-bunny-tail-300: #d1b8c9;
  --color-bunny-tail-400: #b398ab;
  --color-bunny-tail-500: #987c8f;
  --color-bunny-tail-600: #7d6275;
  --color-bunny-tail-700: #644d5d;
  --color-bunny-tail-800: #4f3b49;
  --color-bunny-tail-900: #3e2d39;
  --color-bunny-tail-950: #271b23;
}