Black Box to Bunny Tail Color Palette

About this palette

Black Box to Bunny Tail is a 4-color cool palette: #00282F (Black Box), #007E35 (Pharmaceutical Green), #EC8464 (Peachy Feeling), #FFE0FD (Bunny Tail). It mixes turquoise, green, red, white tones and feels cool overall. The strongest text pairing is #00282F on #FFE0FD with a contrast ratio of 12.89:1, and 2 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Black Box	rgb(0, 40, 47)	hsl(189, 100%, 9%)
Pharmaceutical Green	rgb(0, 126, 53)	hsl(145, 100%, 25%)
Peachy Feeling	rgb(236, 132, 100)	hsl(14, 78%, 66%)
Bunny Tail	rgb(255, 224, 253)	hsl(304, 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.

Aa12.89:1 Super#00282F on #FFE0FD
Aa12.89:1 Super#FFE0FD on #00282F
Aa5.99:1 Good#00282F on #EC8464
Aa5.99:1 Good#EC8464 on #00282F
Aa4.29:1 Poor#007E35 on #FFE0FD
Aa4.29:1 Poor#FFE0FD on #007E35
Aa3.00:1 Poor#00282F on #007E35
Aa3.00:1 Poor#007E35 on #00282F

Color blindness preview

CSS variables

/* Black Box to Bunny Tail — https://swatchly.xyz/palette/00282f-007e35-ec8464-ffe0fd */
:root {
  --black-box: #00282f;
  --pharmaceutical-green: #007e35;
  --peachy-feeling: #ec8464;
  --bunny-tail: #ffe0fd;
}

Tailwind CSS v4

/* Black Box to Bunny Tail — https://swatchly.xyz/palette/00282f-007e35-ec8464-ffe0fd */
@theme {
  --color-black-box: #00282f;
  --color-black-box-50: #e4faff;
  --color-black-box-100: #d7f1f6;
  --color-black-box-200: #c0dee4;
  --color-black-box-300: #a6c8cf;
  --color-black-box-400: #83a9b1;
  --color-black-box-500: #688e97;
  --color-black-box-600: #4f747c;
  --color-black-box-700: #3b5e65;
  --color-black-box-800: #2c4a51;
  --color-black-box-900: #203b40;
  --color-black-box-950: #00282f;
  --color-pharmaceutical-green: #007e35;
  --color-pharmaceutical-green-50: #dfffe4;
  --color-pharmaceutical-green-100: #c0fcca;
  --color-pharmaceutical-green-200: #a3ebaf;
  --color-pharmaceutical-green-300: #82d692;
  --color-pharmaceutical-green-400: #57b76d;
  --color-pharmaceutical-green-500: #329a50;
  --color-pharmaceutical-green-600: #007e35;
  --color-pharmaceutical-green-700: #006429;
  --color-pharmaceutical-green-800: #004f1e;
  --color-pharmaceutical-green-900: #003d16;
  --color-pharmaceutical-green-950: #00260b;
  --color-peachy-feeling: #ec8464;
  --color-peachy-feeling-50: #fff3f0;
  --color-peachy-feeling-100: #ffe7df;
  --color-peachy-feeling-200: #ffcdbd;
  --color-peachy-feeling-300: #ffac92;
  --color-peachy-feeling-400: #ec8464;
  --color-peachy-feeling-500: #cc6849;
  --color-peachy-feeling-600: #ad4c2e;
  --color-peachy-feeling-700: #8f371a;
  --color-peachy-feeling-800: #74260b;
  --color-peachy-feeling-900: #5c1a03;
  --color-peachy-feeling-950: #3c0d00;
  --color-bunny-tail: #ffe0fd;
  --color-bunny-tail-50: #fff0fe;
  --color-bunny-tail-100: #ffe0fd;
  --color-bunny-tail-200: #e6cfe4;
  --color-bunny-tail-300: #d1b8cf;
  --color-bunny-tail-400: #b397b1;
  --color-bunny-tail-500: #987c96;
  --color-bunny-tail-600: #7c627b;
  --color-bunny-tail-700: #644c63;
  --color-bunny-tail-800: #4f3a4e;
  --color-bunny-tail-900: #3d2c3d;
  --color-bunny-tail-950: #271a26;
}