Bunny Tail to Icy Plains Color Palette

About this palette

Bunny Tail to Icy Plains is a 5-color pastel, light, cool palette: #FFE3FA (Bunny Tail), #E4C7A2 (Egghead), #A5D5E5 (Light Blue), #CDE5BB (Frozen Forest), #D4D1FF (Icy Plains). It mixes white, orange, blue, green, purple tones and feels cool overall. The strongest text pairing is #FFE3FA on #E4C7A2 with a contrast ratio of 1.36:1, and 0 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Bunny Tail	rgb(255, 227, 250)	hsl(311, 100%, 95%)
Egghead	rgb(228, 199, 162)	hsl(34, 55%, 76%)
Light Blue	rgb(165, 213, 229)	hsl(195, 55%, 77%)
Frozen Forest	rgb(205, 229, 187)	hsl(94, 45%, 82%)
Icy Plains	rgb(212, 209, 255)	hsl(244, 100%, 91%)

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

/* Bunny Tail to Icy Plains — https://swatchly.xyz/palette/ffe3fa-e4c7a2-a5d5e5-cde5bb-d4d1ff */
:root {
  --bunny-tail: #ffe3fa;
  --egghead: #e4c7a2;
  --light-blue: #a5d5e5;
  --frozen-forest: #cde5bb;
  --icy-plains: #d4d1ff;
}

Tailwind CSS v4

/* Bunny Tail to Icy Plains — https://swatchly.xyz/palette/ffe3fa-e4c7a2-a5d5e5-cde5bb-d4d1ff */
@theme {
  --color-bunny-tail: #ffe3fa;
  --color-bunny-tail-50: #fff2fd;
  --color-bunny-tail-100: #ffe3fa;
  --color-bunny-tail-200: #e6d2e2;
  --color-bunny-tail-300: #d1bacd;
  --color-bunny-tail-400: #b299ae;
  --color-bunny-tail-500: #977e92;
  --color-bunny-tail-600: #7b6377;
  --color-bunny-tail-700: #634d5f;
  --color-bunny-tail-800: #4e3b4b;
  --color-bunny-tail-900: #3d2d3a;
  --color-bunny-tail-950: #261b24;
  --color-egghead: #e4c7a2;
  --color-egghead-50: #fcead4;
  --color-egghead-100: #f2dec5;
  --color-egghead-200: #e4c7a2;
  --color-egghead-300: #cdb393;
  --color-egghead-400: #b09573;
  --color-egghead-500: #977c59;
  --color-egghead-600: #7d6442;
  --color-egghead-700: #664f31;
  --color-egghead-800: #523e23;
  --color-egghead-900: #402f18;
  --color-egghead-950: #291d0c;
  --color-light-blue: #a5d5e5;
  --color-light-blue-50: #f5fcff;
  --color-light-blue-100: #e1f7ff;
  --color-light-blue-200: #c7e7f2;
  --color-light-blue-300: #a5d5e5;
  --color-light-blue-400: #87b3c1;
  --color-light-blue-500: #6795a4;
  --color-light-blue-600: #4c7887;
  --color-light-blue-700: #365f6c;
  --color-light-blue-800: #254a55;
  --color-light-blue-900: #183841;
  --color-light-blue-950: #0c232a;
  --color-frozen-forest: #cde5bb;
  --color-frozen-forest-50: #f0fde7;
  --color-frozen-forest-100: #e6f4db;
  --color-frozen-forest-200: #cde5bb;
  --color-frozen-forest-300: #b8ccaa;
  --color-frozen-forest-400: #97ac86;
  --color-frozen-forest-500: #7a906a;
  --color-frozen-forest-600: #607550;
  --color-frozen-forest-700: #4a5d3b;
  --color-frozen-forest-800: #38482b;
  --color-frozen-forest-900: #2a381f;
  --color-frozen-forest-950: #192311;
  --color-icy-plains: #d4d1ff;
  --color-icy-plains-50: #f4f3ff;
  --color-icy-plains-100: #e9e8ff;
  --color-icy-plains-200: #d4d1ff;
  --color-icy-plains-300: #bebce2;
  --color-icy-plains-400: #9f9cc5;
  --color-icy-plains-500: #8380aa;
  --color-icy-plains-600: #69668e;
  --color-icy-plains-700: #535074;
  --color-icy-plains-800: #413e5d;
  --color-icy-plains-900: #322f49;
  --color-icy-plains-950: #1e1c2f;
}