Woven to Bunny Tail Color Palette

About this palette

Woven to Bunny Tail is a 5-color pastel, light, warm palette: #D8D1A5 (Woven), #FDCDC0 (Piggy Bank), #BFE8D0 (Delta Mint), #F4EDBD (Veiled Treasure), #FBE1FF (Bunny Tail). It mixes yellow, pink, green, purple tones and feels warm overall. The strongest text pairing is #D8D1A5 on #F4EDBD with a contrast ratio of 1.30:1, and 0 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Woven	rgb(216, 209, 165)	hsl(52, 40%, 75%)
Piggy Bank	rgb(253, 205, 192)	hsl(13, 94%, 87%)
Delta Mint	rgb(191, 232, 208)	hsl(145, 47%, 83%)
Veiled Treasure	rgb(244, 237, 189)	hsl(52, 71%, 85%)
Bunny Tail	rgb(251, 225, 255)	hsl(292, 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.

Color blindness preview

CSS variables

/* Woven to Bunny Tail — https://swatchly.xyz/palette/d8d1a5-fdcdc0-bfe8d0-f4edbd-fbe1ff */
:root {
  --woven: #d8d1a5;
  --piggy-bank: #fdcdc0;
  --delta-mint: #bfe8d0;
  --veiled-treasure: #f4edbd;
  --bunny-tail: #fbe1ff;
}

Tailwind CSS v4

/* Woven to Bunny Tail — https://swatchly.xyz/palette/d8d1a5-fdcdc0-bfe8d0-f4edbd-fbe1ff */
@theme {
  --color-woven: #d8d1a5;
  --color-woven-50: #f5f1d7;
  --color-woven-100: #eae6c8;
  --color-woven-200: #d8d1a5;
  --color-woven-300: #c2bc96;
  --color-woven-400: #a49e75;
  --color-woven-500: #8a845a;
  --color-woven-600: #716a43;
  --color-woven-700: #5b5531;
  --color-woven-800: #484323;
  --color-woven-900: #383318;
  --color-woven-950: #23200c;
  --color-piggy-bank: #fdcdc0;
  --color-piggy-bank-50: #fff4f1;
  --color-piggy-bank-100: #ffe7e0;
  --color-piggy-bank-200: #fdcdc0;
  --color-piggy-bank-300: #e0b8ad;
  --color-piggy-bank-400: #c3978c;
  --color-piggy-bank-500: #a77b6f;
  --color-piggy-bank-600: #8a6156;
  --color-piggy-bank-700: #704b41;
  --color-piggy-bank-800: #593930;
  --color-piggy-bank-900: #462b24;
  --color-piggy-bank-950: #2d1a14;
  --color-delta-mint: #bfe8d0;
  --color-delta-mint-50: #e9fff2;
  --color-delta-mint-100: #def6e8;
  --color-delta-mint-200: #bfe8d0;
  --color-delta-mint-300: #adcebb;
  --color-delta-mint-400: #8aaf99;
  --color-delta-mint-500: #6d937d;
  --color-delta-mint-600: #527762;
  --color-delta-mint-700: #3d5f4c;
  --color-delta-mint-800: #2c4a3a;
  --color-delta-mint-900: #20392c;
  --color-delta-mint-950: #12241a;
  --color-veiled-treasure: #f4edbd;
  --color-veiled-treasure-50: #faf6dc;
  --color-veiled-treasure-100: #f4edbd;
  --color-veiled-treasure-200: #ded9b6;
  --color-veiled-treasure-300: #c8c29b;
  --color-veiled-treasure-400: #a9a377;
  --color-veiled-treasure-500: #8e885b;
  --color-veiled-treasure-600: #746d42;
  --color-veiled-treasure-700: #5c562f;
  --color-veiled-treasure-800: #494320;
  --color-veiled-treasure-900: #383316;
  --color-veiled-treasure-950: #23200a;
  --color-bunny-tail: #fbe1ff;
  --color-bunny-tail-50: #fdf0ff;
  --color-bunny-tail-100: #fbe1ff;
  --color-bunny-tail-200: #e3d0e6;
  --color-bunny-tail-300: #ceb9d1;
  --color-bunny-tail-400: #b098b3;
  --color-bunny-tail-500: #947d98;
  --color-bunny-tail-600: #79637d;
  --color-bunny-tail-700: #614d64;
  --color-bunny-tail-800: #4d3b4f;
  --color-bunny-tail-900: #3c2d3e;
  --color-bunny-tail-950: #251b27;
}