Bunny Tail to Pitch-Black Forests color palette

About this palette

Bunny Tail to Pitch-Black Forests is a 4-color cool palette: #FDE1FF (Bunny Tail), #4EAD93 (Hole in One), #8F5B62 (Velour Scar), #133025 (Pitch-Black Forests). It mixes white, turquoise, red tones and feels cool overall. The strongest text pairing is #FDE1FF on #133025 with a contrast ratio of 11.77:1, and 3 of its 6 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Bunny Tailrgb(253, 225, 255)hsl(296, 100%, 94%)
Hole in Onergb(78, 173, 147)hsl(164, 38%, 49%)
Velour Scarrgb(143, 91, 98)hsl(352, 22%, 46%)
Pitch-Black Forestsrgb(19, 48, 37)hsl(157, 43%, 13%)

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.77:1 Very good#FDE1FF on #133025
  • Aa11.77:1 Very good#133025 on #FDE1FF
  • Aa5.23:1 Good#4EAD93 on #133025
  • Aa5.23:1 Good#133025 on #4EAD93
  • Aa4.53:1 Good#FDE1FF on #8F5B62
  • Aa4.53:1 Good#8F5B62 on #FDE1FF

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Bunny Tail to Pitch-Black Forests — https://swatchly.xyz/palette/fde1ff-4ead93-8f5b62-133025 */
:root {
  --bunny-tail: #fde1ff;
  --hole-in-one: #4ead93;
  --velour-scar: #8f5b62;
  --pitch-black-forests: #133025;
}

Tailwind CSS v4

/* Bunny Tail to Pitch-Black Forests — https://swatchly.xyz/palette/fde1ff-4ead93-8f5b62-133025 */
@theme {
  --color-bunny-tail: #fde1ff;
  --color-bunny-tail-50: #fef0ff;
  --color-bunny-tail-100: #fde1ff;
  --color-bunny-tail-200: #e5d0e6;
  --color-bunny-tail-300: #cfb8d1;
  --color-bunny-tail-400: #b198b3;
  --color-bunny-tail-500: #967c98;
  --color-bunny-tail-600: #7a627c;
  --color-bunny-tail-700: #624d64;
  --color-bunny-tail-800: #4e3b4f;
  --color-bunny-tail-900: #3c2c3e;
  --color-bunny-tail-950: #261b27;
  --color-hole-in-one: #4ead93;
  --color-hole-in-one-50: #cdffee;
  --color-hole-in-one-100: #bcf5e2;
  --color-hole-in-one-200: #9de2cd;
  --color-hole-in-one-300: #7cccb4;
  --color-hole-in-one-400: #4ead93;
  --color-hole-in-one-500: #2f9279;
  --color-hole-in-one-600: #0a7861;
  --color-hole-in-one-700: #00604d;
  --color-hole-in-one-800: #004c3c;
  --color-hole-in-one-900: #003b2f;
  --color-hole-in-one-950: #00261d;
  --color-velour-scar: #8f5b62;
  --color-velour-scar-50: #fff1f3;
  --color-velour-scar-100: #ffe3e6;
  --color-velour-scar-200: #f7cacf;
  --color-velour-scar-300: #e4b2b8;
  --color-velour-scar-400: #c79197;
  --color-velour-scar-500: #ab757c;
  --color-velour-scar-600: #8f5b62;
  --color-velour-scar-700: #74464d;
  --color-velour-scar-800: #5d353b;
  --color-velour-scar-900: #49272c;
  --color-velour-scar-950: #2f171b;
  --color-pitch-black-forests: #133025;
  --color-pitch-black-forests-50: #e8faf2;
  --color-pitch-black-forests-100: #dcf1e7;
  --color-pitch-black-forests-200: #c6ded3;
  --color-pitch-black-forests-300: #adc9bc;
  --color-pitch-black-forests-400: #89a89a;
  --color-pitch-black-forests-500: #6b8b7d;
  --color-pitch-black-forests-600: #516e61;
  --color-pitch-black-forests-700: #3b554a;
  --color-pitch-black-forests-800: #2a4036;
  --color-pitch-black-forests-900: #133025;
  --color-pitch-black-forests-950: #0f1b16;
}

Similar palettes