Breeze to Bunny Tail Color Palette

About this palette

Breeze to Bunny Tail is a 5-color pastel, light, warm palette: #B8C6E7 (Breeze), #EBC6BB (Strawberry Risotto), #E3EAB3 (Sour), #ADF9F3 (Ice Citadel), #FFE6F9 (Bunny Tail). It mixes blue, pink, green, turquoise, white tones and feels warm overall. The strongest text pairing is #B8C6E7 on #FFE6F9 with a contrast ratio of 1.46:1, and 0 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Breeze	rgb(184, 198, 231)	hsl(222, 49%, 81%)
Strawberry Risotto	rgb(235, 198, 187)	hsl(14, 55%, 83%)
Sour	rgb(227, 234, 179)	hsl(68, 57%, 81%)
Ice Citadel	rgb(173, 249, 243)	hsl(175, 86%, 83%)
Bunny Tail	rgb(255, 230, 249)	hsl(314, 100%, 95%)

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

/* Breeze to Bunny Tail — https://swatchly.xyz/palette/b8c6e7-ebc6bb-e3eab3-adf9f3-ffe6f9 */
:root {
  --breeze: #b8c6e7;
  --strawberry-risotto: #ebc6bb;
  --sour: #e3eab3;
  --ice-citadel: #adf9f3;
  --bunny-tail: #ffe6f9;
}

Tailwind CSS v4

/* Breeze to Bunny Tail — https://swatchly.xyz/palette/b8c6e7-ebc6bb-e3eab3-adf9f3-ffe6f9 */
@theme {
  --color-breeze: #b8c6e7;
  --color-breeze-50: #f5f8ff;
  --color-breeze-100: #e8efff;
  --color-breeze-200: #d2dcf4;
  --color-breeze-300: #b8c6e7;
  --color-breeze-400: #99a6c4;
  --color-breeze-500: #7c89a8;
  --color-breeze-600: #626e8b;
  --color-breeze-700: #4b5671;
  --color-breeze-800: #39435a;
  --color-breeze-900: #2a3246;
  --color-breeze-950: #191f2d;
  --color-strawberry-risotto: #ebc6bb;
  --color-strawberry-risotto-50: #ffebe5;
  --color-strawberry-risotto-100: #f7ded7;
  --color-strawberry-risotto-200: #ebc6bb;
  --color-strawberry-risotto-300: #d2b2a9;
  --color-strawberry-risotto-400: #b69489;
  --color-strawberry-risotto-500: #9b7a70;
  --color-strawberry-risotto-600: #816157;
  --color-strawberry-risotto-700: #694c44;
  --color-strawberry-risotto-800: #543b34;
  --color-strawberry-risotto-900: #422d27;
  --color-strawberry-risotto-950: #2a1b17;
  --color-sour: #e3eab3;
  --color-sour-50: #eef3d3;
  --color-sour-100: #e3eab3;
  --color-sour-200: #d1d6ad;
  --color-sour-300: #bbc193;
  --color-sour-400: #9da371;
  --color-sour-500: #838956;
  --color-sour-600: #6a6f3e;
  --color-sour-700: #55592c;
  --color-sour-800: #42461e;
  --color-sour-900: #333613;
  --color-sour-950: #1f2108;
  --color-ice-citadel: #adf9f3;
  --color-ice-citadel-50: #d3fcf9;
  --color-ice-citadel-100: #adf9f3;
  --color-ice-citadel-200: #abe2dd;
  --color-ice-citadel-300: #8ecdc8;
  --color-ice-citadel-400: #68afaa;
  --color-ice-citadel-500: #49948f;
  --color-ice-citadel-600: #2e7975;
  --color-ice-citadel-700: #18615e;
  --color-ice-citadel-800: #074d4a;
  --color-ice-citadel-900: #003c39;
  --color-ice-citadel-950: #002524;
  --color-bunny-tail: #ffe6f9;
  --color-bunny-tail-50: #fff4fc;
  --color-bunny-tail-100: #ffe6f9;
  --color-bunny-tail-200: #e6d4e2;
  --color-bunny-tail-300: #d0bccc;
  --color-bunny-tail-400: #b29bac;
  --color-bunny-tail-500: #967f90;
  --color-bunny-tail-600: #7a6575;
  --color-bunny-tail-700: #614e5d;
  --color-bunny-tail-800: #4d3c49;
  --color-bunny-tail-900: #3c2e39;
  --color-bunny-tail-950: #261c23;
}