Mint Twist to Bunny Tail Color Palette

About this palette

Mint Twist to Bunny Tail is a 5-color pastel, light, cool palette: #8ACDC7 (Mint Twist), #D0D2FF (Icy Plains), #FFCBDA (Light Pink), #BBFBD9 (Smell the Mint), #FAE5FF (Bunny Tail). It mixes turquoise, purple, pink, green, white tones and feels cool overall. The strongest text pairing is #8ACDC7 on #BBFBD9 with a contrast ratio of 1.54:1, and 0 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Mint Twist	rgb(138, 205, 199)	hsl(175, 40%, 67%)
Icy Plains	rgb(208, 210, 255)	hsl(237, 100%, 91%)
Light Pink	rgb(255, 203, 218)	hsl(343, 100%, 90%)
Smell the Mint	rgb(187, 251, 217)	hsl(148, 89%, 86%)
Bunny Tail	rgb(250, 229, 255)	hsl(288, 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

/* Mint Twist to Bunny Tail — https://swatchly.xyz/palette/8acdc7-d0d2ff-ffcbda-bbfbd9-fae5ff */
:root {
  --mint-twist: #8acdc7;
  --icy-plains: #d0d2ff;
  --light-pink: #ffcbda;
  --smell-the-mint: #bbfbd9;
  --bunny-tail: #fae5ff;
}

Tailwind CSS v4

/* Mint Twist to Bunny Tail — https://swatchly.xyz/palette/8acdc7-d0d2ff-ffcbda-bbfbd9-fae5ff */
@theme {
  --color-mint-twist: #8acdc7;
  --color-mint-twist-50: #d8fdf9;
  --color-mint-twist-100: #caf3ef;
  --color-mint-twist-200: #afe1dc;
  --color-mint-twist-300: #8acdc7;
  --color-mint-twist-400: #6dada8;
  --color-mint-twist-500: #50928d;
  --color-mint-twist-600: #367772;
  --color-mint-twist-700: #22605b;
  --color-mint-twist-800: #134c48;
  --color-mint-twist-900: #093b38;
  --color-mint-twist-950: #032523;
  --color-icy-plains: #d0d2ff;
  --color-icy-plains-50: #f3f3ff;
  --color-icy-plains-100: #e7e8ff;
  --color-icy-plains-200: #d0d2ff;
  --color-icy-plains-300: #bbbce2;
  --color-icy-plains-400: #9b9dc6;
  --color-icy-plains-500: #8081aa;
  --color-icy-plains-600: #66678e;
  --color-icy-plains-700: #505174;
  --color-icy-plains-800: #3e3f5d;
  --color-icy-plains-900: #2f304a;
  --color-icy-plains-950: #1d1d30;
  --color-light-pink: #ffcbda;
  --color-light-pink-50: #fff5f7;
  --color-light-pink-100: #ffe7ee;
  --color-light-pink-200: #ffcbda;
  --color-light-pink-300: #e2b7c3;
  --color-light-pink-400: #c495a3;
  --color-light-pink-500: #a87987;
  --color-light-pink-600: #8b5e6c;
  --color-light-pink-700: #704855;
  --color-light-pink-800: #593741;
  --color-light-pink-900: #462932;
  --color-light-pink-950: #2d181f;
  --color-smell-the-mint: #bbfbd9;
  --color-smell-the-mint-50: #dbfeeb;
  --color-smell-the-mint-100: #bbfbd9;
  --color-smell-the-mint-200: #b5e3ca;
  --color-smell-the-mint-300: #99ceb2;
  --color-smell-the-mint-400: #75b092;
  --color-smell-the-mint-500: #589576;
  --color-smell-the-mint-600: #3e7a5d;
  --color-smell-the-mint-700: #2a6248;
  --color-smell-the-mint-800: #1b4d37;
  --color-smell-the-mint-900: #113c29;
  --color-smell-the-mint-950: #072618;
  --color-bunny-tail: #fae5ff;
  --color-bunny-tail-50: #fdf3ff;
  --color-bunny-tail-100: #fae5ff;
  --color-bunny-tail-200: #e2d3e6;
  --color-bunny-tail-300: #cdbbd1;
  --color-bunny-tail-400: #ae9bb2;
  --color-bunny-tail-500: #927f97;
  --color-bunny-tail-600: #77657b;
  --color-bunny-tail-700: #5f4f63;
  --color-bunny-tail-800: #4b3d4e;
  --color-bunny-tail-900: #3a2e3d;
  --color-bunny-tail-950: #241c26;
}