Bunny Tail to Bitter Liquorice color palette

FFE2F0Bunny Tail A5C8D2Wave 6894A1Cavolo Nero 6C4A61Hibernation 2A291ABitter Liquorice

About this palette

Bunny Tail to Bitter Liquorice is a 5-color muted, vintage palette: #FFE2F0 (Bunny Tail), #A5C8D2 (Wave), #6894A1 (Cavolo Nero), #6C4A61 (Hibernation), #2A291A (Bitter Liquorice). It mixes white, blue, pink, gray tones and feels balanced overall. The strongest text pairing is #FFE2F0 on #2A291A with a contrast ratio of 12.16:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Bunny Tail	rgb(255, 226, 240)	hsl(331, 100%, 94%)
Wave	rgb(165, 200, 210)	hsl(193, 33%, 74%)
Cavolo Nero	rgb(104, 148, 161)	hsl(194, 23%, 52%)
Hibernation	rgb(108, 74, 97)	hsl(319, 19%, 36%)
Bitter Liquorice	rgb(42, 41, 26)	hsl(56, 24%, 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.

Aa12.16:1 Super#FFE2F0 on #2A291A
Aa12.16:1 Super#2A291A on #FFE2F0
Aa8.24:1 Very good#A5C8D2 on #2A291A
Aa8.24:1 Very good#2A291A on #A5C8D2
Aa6.23:1 Good#FFE2F0 on #6C4A61
Aa6.23:1 Good#6C4A61 on #FFE2F0
Aa4.43:1 Poor#6894A1 on #2A291A
Aa4.43:1 Poor#2A291A on #6894A1

Color blindness preview

CSS variables

/* Bunny Tail to Bitter Liquorice — https://swatchly.xyz/palette/ffe2f0-a5c8d2-6894a1-6c4a61-2a291a */
:root {
  --bunny-tail: #ffe2f0;
  --wave: #a5c8d2;
  --cavolo-nero: #6894a1;
  --hibernation: #6c4a61;
  --bitter-liquorice: #2a291a;
}

Tailwind CSS v4

/* Bunny Tail to Bitter Liquorice — https://swatchly.xyz/palette/ffe2f0-a5c8d2-6894a1-6c4a61-2a291a */
@theme {
  --color-bunny-tail: #ffe2f0;
  --color-bunny-tail-50: #fff1f7;
  --color-bunny-tail-100: #ffe2f0;
  --color-bunny-tail-200: #e6d1db;
  --color-bunny-tail-300: #d1b9c5;
  --color-bunny-tail-400: #b399a6;
  --color-bunny-tail-500: #987e8a;
  --color-bunny-tail-600: #7c6470;
  --color-bunny-tail-700: #644e59;
  --color-bunny-tail-800: #4f3c45;
  --color-bunny-tail-900: #3d2d35;
  --color-bunny-tail-950: #271b21;
  --color-wave: #a5c8d2;
  --color-wave-50: #e6f9ff;
  --color-wave-100: #daf0f6;
  --color-wave-200: #c3dde4;
  --color-wave-300: #a5c8d2;
  --color-wave-400: #87a8b1;
  --color-wave-500: #6b8d96;
  --color-wave-600: #52727b;
  --color-wave-700: #3d5b63;
  --color-wave-800: #2d474e;
  --color-wave-900: #21373d;
  --color-wave-950: #122226;
  --color-cavolo-nero: #6894a1;
  --color-cavolo-nero-50: #e9faff;
  --color-cavolo-nero-100: #d7f3fb;
  --color-cavolo-nero-200: #c0e1eb;
  --color-cavolo-nero-300: #a7ccd8;
  --color-cavolo-nero-400: #84aebb;
  --color-cavolo-nero-500: #6894a1;
  --color-cavolo-nero-600: #4d7884;
  --color-cavolo-nero-700: #38606b;
  --color-cavolo-nero-800: #284b55;
  --color-cavolo-nero-900: #1b3942;
  --color-cavolo-nero-950: #0e2329;
  --color-hibernation: #6c4a61;
  --color-hibernation-50: #fff0fa;
  --color-hibernation-100: #fce3f3;
  --color-hibernation-200: #eccde1;
  --color-hibernation-300: #d8b6cc;
  --color-hibernation-400: #ba95ae;
  --color-hibernation-500: #9f7a92;
  --color-hibernation-600: #836078;
  --color-hibernation-700: #6c4a61;
  --color-hibernation-800: #55394c;
  --color-hibernation-900: #422b3b;
  --color-hibernation-950: #2a1a25;
  --color-bitter-liquorice: #2a291a;
  --color-bitter-liquorice-50: #f6f6eb;
  --color-bitter-liquorice-100: #ecece0;
  --color-bitter-liquorice-200: #d9d8ca;
  --color-bitter-liquorice-300: #c3c2b2;
  --color-bitter-liquorice-400: #a3a391;
  --color-bitter-liquorice-500: #8a8977;
  --color-bitter-liquorice-600: #71705f;
  --color-bitter-liquorice-700: #5c5b4c;
  --color-bitter-liquorice-800: #4b4a3c;
  --color-bitter-liquorice-900: #3c3c2f;
  --color-bitter-liquorice-950: #2a291a;
}