Bunny Tail to Camel Color Palette

About this palette

Bunny Tail to Camel is a 4-color vintage palette: #FFDFFB (Bunny Tail), #27283B (Midnight Express), #437048 (Parsley Sprig), #C4A45D (Camel). It mixes pink, gray, green, yellow tones and feels warm overall. The strongest text pairing is #FFDFFB on #27283B with a contrast ratio of 11.84:1, and 3 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Bunny Tail	rgb(255, 223, 251)	hsl(308, 100%, 94%)
Midnight Express	rgb(39, 40, 59)	hsl(237, 20%, 19%)
Parsley Sprig	rgb(67, 112, 72)	hsl(127, 25%, 35%)
Camel	rgb(196, 164, 93)	hsl(41, 47%, 57%)

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.

Aa11.84:1 Very good#FFDFFB on #27283B
Aa11.84:1 Very good#27283B on #FFDFFB
Aa6.07:1 Good#27283B on #C4A45D
Aa6.07:1 Good#C4A45D on #27283B
Aa4.71:1 Good#FFDFFB on #437048
Aa4.71:1 Good#437048 on #FFDFFB

Color blindness preview

CSS variables

/* Bunny Tail to Camel — https://swatchly.xyz/palette/ffdffb-27283b-437048-c4a45d */
:root {
  --bunny-tail: #ffdffb;
  --midnight-express: #27283b;
  --parsley-sprig: #437048;
  --camel: #c4a45d;
}

Tailwind CSS v4

/* Bunny Tail to Camel — https://swatchly.xyz/palette/ffdffb-27283b-437048-c4a45d */
@theme {
  --color-bunny-tail: #ffdffb;
  --color-bunny-tail-50: #ffeffd;
  --color-bunny-tail-100: #ffdffb;
  --color-bunny-tail-200: #e6cfe3;
  --color-bunny-tail-300: #d1b7ce;
  --color-bunny-tail-400: #b397b0;
  --color-bunny-tail-500: #987b95;
  --color-bunny-tail-600: #7d617a;
  --color-bunny-tail-700: #644c62;
  --color-bunny-tail-800: #503a4d;
  --color-bunny-tail-900: #3e2c3c;
  --color-bunny-tail-950: #271a26;
  --color-midnight-express: #27283b;
  --color-midnight-express-50: #f3f4ff;
  --color-midnight-express-100: #e8eafa;
  --color-midnight-express-200: #d4d6e9;
  --color-midnight-express-300: #bdbfd4;
  --color-midnight-express-400: #9c9eb5;
  --color-midnight-express-500: #7f8198;
  --color-midnight-express-600: #63657a;
  --color-midnight-express-700: #4c4d60;
  --color-midnight-express-800: #383949;
  --color-midnight-express-900: #27283b;
  --color-midnight-express-950: #171820;
  --color-parsley-sprig: #437048;
  --color-parsley-sprig-50: #e3fee4;
  --color-parsley-sprig-100: #d4f3d6;
  --color-parsley-sprig-200: #bbe0bd;
  --color-parsley-sprig-300: #9fc9a2;
  --color-parsley-sprig-400: #7ba97f;
  --color-parsley-sprig-500: #5e8c63;
  --color-parsley-sprig-600: #437048;
  --color-parsley-sprig-700: #325937;
  --color-parsley-sprig-800: #244628;
  --color-parsley-sprig-900: #1a371d;
  --color-parsley-sprig-950: #0d2210;
  --color-camel: #c4a45d;
  --color-camel-50: #fff7e6;
  --color-camel-100: #ffedc7;
  --color-camel-200: #f1daa8;
  --color-camel-300: #dec48a;
  --color-camel-400: #c4a45d;
  --color-camel-500: #a68740;
  --color-camel-600: #896b22;
  --color-camel-700: #6f5407;
  --color-camel-800: #574000;
  --color-camel-900: #433100;
  --color-camel-950: #2a1d00;
}