Icy Plains to Bunny Tail Color Palette

About this palette

Icy Plains to Bunny Tail is a 5-color pastel, light, warm palette: #DCD2FC (Icy Plains), #CED5A4 (Crystal Palace), #FFECC7 (Biscuit), #A8D6FF (Droplet), #FFE5FA (Bunny Tail). It mixes purple, green, white, blue tones and feels warm overall. The strongest text pairing is #CED5A4 on #FFECC7 with a contrast ratio of 1.32:1, and 0 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Icy Plains	rgb(220, 210, 252)	hsl(254, 88%, 91%)
Crystal Palace	rgb(206, 213, 164)	hsl(69, 37%, 74%)
Biscuit	rgb(255, 236, 199)	hsl(40, 100%, 89%)
Droplet	rgb(168, 214, 255)	hsl(208, 100%, 83%)
Bunny Tail	rgb(255, 229, 250)	hsl(312, 100%, 95%)

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

/* Icy Plains to Bunny Tail — https://swatchly.xyz/palette/dcd2fc-ced5a4-ffecc7-a8d6ff-ffe5fa */
:root {
  --icy-plains: #dcd2fc;
  --crystal-palace: #ced5a4;
  --biscuit: #ffecc7;
  --droplet: #a8d6ff;
  --bunny-tail: #ffe5fa;
}

Tailwind CSS v4

/* Icy Plains to Bunny Tail — https://swatchly.xyz/palette/dcd2fc-ced5a4-ffecc7-a8d6ff-ffe5fa */
@theme {
  --color-icy-plains: #dcd2fc;
  --color-icy-plains-50: #f7f4ff;
  --color-icy-plains-100: #eee9ff;
  --color-icy-plains-200: #dcd2fc;
  --color-icy-plains-300: #c5bcdf;
  --color-icy-plains-400: #a59cc2;
  --color-icy-plains-500: #8a80a6;
  --color-icy-plains-600: #6f668a;
  --color-icy-plains-700: #584f70;
  --color-icy-plains-800: #453d5a;
  --color-icy-plains-900: #352e46;
  --color-icy-plains-950: #211c2d;
  --color-crystal-palace: #ced5a4;
  --color-crystal-palace-50: #eff3d6;
  --color-crystal-palace-100: #e3e8c8;
  --color-crystal-palace-200: #ced5a4;
  --color-crystal-palace-300: #b9bf95;
  --color-crystal-palace-400: #9ba174;
  --color-crystal-palace-500: #818759;
  --color-crystal-palace-600: #686e42;
  --color-crystal-palace-700: #535830;
  --color-crystal-palace-800: #424622;
  --color-crystal-palace-900: #323617;
  --color-crystal-palace-950: #1f210b;
  --color-biscuit: #ffecc7;
  --color-biscuit-50: #fff7e7;
  --color-biscuit-100: #ffecc7;
  --color-biscuit-200: #e6d8be;
  --color-biscuit-300: #d0c1a3;
  --color-biscuit-400: #b2a180;
  --color-biscuit-500: #968563;
  --color-biscuit-600: #7a6a49;
  --color-biscuit-700: #625335;
  --color-biscuit-800: #4d4026;
  --color-biscuit-900: #3c311b;
  --color-biscuit-950: #261e0e;
  --color-droplet: #a8d6ff;
  --color-droplet-50: #e4f2ff;
  --color-droplet-100: #d0e9ff;
  --color-droplet-200: #a8d6ff;
  --color-droplet-300: #98c0e3;
  --color-droplet-400: #77a2c8;
  --color-droplet-500: #5c88ad;
  --color-droplet-600: #446e92;
  --color-droplet-700: #325878;
  --color-droplet-800: #234562;
  --color-droplet-900: #18354d;
  --color-droplet-950: #0c2132;
  --color-bunny-tail: #ffe5fa;
  --color-bunny-tail-50: #fff4fd;
  --color-bunny-tail-100: #ffe5fa;
  --color-bunny-tail-200: #e6d3e2;
  --color-bunny-tail-300: #d1bbcc;
  --color-bunny-tail-400: #b29bad;
  --color-bunny-tail-500: #967f92;
  --color-bunny-tail-600: #7a6476;
  --color-bunny-tail-700: #624e5e;
  --color-bunny-tail-800: #4d3c4a;
  --color-bunny-tail-900: #3c2d39;
  --color-bunny-tail-950: #261b24;
}