Bunny Tail to Pitch Black Color Palette

About this palette

Bunny Tail to Pitch Black is a 5-color muted, gradient palette: #FDE4F2 (Bunny Tail), #A7B6C7 (Ethereal Mist), #A5947C (Saddle Up), #4B6153 (Muddy Olive), #4A3C48 (Pitch Black). It mixes white, gray, yellow tones and feels warm overall. The strongest text pairing is #FDE4F2 on #4A3C48 with a contrast ratio of 8.64:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Bunny Tail	rgb(253, 228, 242)	hsl(326, 86%, 94%)
Ethereal Mist	rgb(167, 182, 199)	hsl(212, 22%, 72%)
Saddle Up	rgb(165, 148, 124)	hsl(35, 19%, 57%)
Muddy Olive	rgb(75, 97, 83)	hsl(142, 13%, 34%)
Pitch Black	rgb(74, 60, 72)	hsl(309, 10%, 26%)

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.64:1 Very good#FDE4F2 on #4A3C48
Aa8.64:1 Very good#4A3C48 on #FDE4F2
Aa5.60:1 Good#FDE4F2 on #4B6153
Aa5.60:1 Good#4B6153 on #FDE4F2
Aa5.00:1 Good#A7B6C7 on #4A3C48
Aa5.00:1 Good#4A3C48 on #A7B6C7
Aa3.51:1 Poor#A5947C on #4A3C48
Aa3.51:1 Poor#4A3C48 on #A5947C

Color blindness preview

CSS variables

/* Bunny Tail to Pitch Black — https://swatchly.xyz/palette/fde4f2-a7b6c7-a5947c-4b6153-4a3c48 */
:root {
  --bunny-tail: #fde4f2;
  --ethereal-mist: #a7b6c7;
  --saddle-up: #a5947c;
  --muddy-olive: #4b6153;
  --pitch-black: #4a3c48;
}

Tailwind CSS v4

/* Bunny Tail to Pitch Black — https://swatchly.xyz/palette/fde4f2-a7b6c7-a5947c-4b6153-4a3c48 */
@theme {
  --color-bunny-tail: #fde4f2;
  --color-bunny-tail-50: #fff2f9;
  --color-bunny-tail-100: #fde4f2;
  --color-bunny-tail-200: #e5d2dc;
  --color-bunny-tail-300: #cfbbc6;
  --color-bunny-tail-400: #b19ba7;
  --color-bunny-tail-500: #957f8c;
  --color-bunny-tail-600: #7a6571;
  --color-bunny-tail-700: #624f5a;
  --color-bunny-tail-800: #4d3d46;
  --color-bunny-tail-900: #3c2e36;
  --color-bunny-tail-950: #261c22;
  --color-ethereal-mist: #a7b6c7;
  --color-ethereal-mist-50: #e6f0fa;
  --color-ethereal-mist-100: #d9e4f0;
  --color-ethereal-mist-200: #c2cedc;
  --color-ethereal-mist-300: #a7b6c7;
  --color-ethereal-mist-400: #8b99a9;
  --color-ethereal-mist-500: #728090;
  --color-ethereal-mist-600: #5a6876;
  --color-ethereal-mist-700: #475360;
  --color-ethereal-mist-800: #37424d;
  --color-ethereal-mist-900: #2b343e;
  --color-ethereal-mist-950: #192027;
  --color-saddle-up: #a5947c;
  --color-saddle-up-50: #faf0e1;
  --color-saddle-up-100: #f0e4d3;
  --color-saddle-up-200: #dcceba;
  --color-saddle-up-300: #c5b59f;
  --color-saddle-up-400: #a5947c;
  --color-saddle-up-500: #8b7b63;
  --color-saddle-up-600: #72634d;
  --color-saddle-up-700: #5c4e3a;
  --color-saddle-up-800: #493d2c;
  --color-saddle-up-900: #3a3021;
  --color-saddle-up-950: #251e13;
  --color-muddy-olive: #4b6153;
  --color-muddy-olive-50: #ebf9f0;
  --color-muddy-olive-100: #e0f0e5;
  --color-muddy-olive-200: #ccded2;
  --color-muddy-olive-300: #b4c9bb;
  --color-muddy-olive-400: #94ab9c;
  --color-muddy-olive-500: #7a9182;
  --color-muddy-olive-600: #617769;
  --color-muddy-olive-700: #4b6153;
  --color-muddy-olive-800: #3a4c40;
  --color-muddy-olive-900: #2b3b31;
  --color-muddy-olive-950: #19251e;
  --color-pitch-black: #4a3c48;
  --color-pitch-black-50: #fbf2fa;
  --color-pitch-black-100: #f2e7f0;
  --color-pitch-black-200: #e0d3de;
  --color-pitch-black-300: #cabbc8;
  --color-pitch-black-400: #ab9ba9;
  --color-pitch-black-500: #90808d;
  --color-pitch-black-600: #756572;
  --color-pitch-black-700: #5d4f5b;
  --color-pitch-black-800: #4a3c48;
  --color-pitch-black-900: #382e37;
  --color-pitch-black-950: #231c22;
}