Mint Twist to Holographic Lavender color palette

9FCCB5Mint Twist F0C6F2Purple’s Baby Sister FFC8C9Cotton Candy Comet E4E4FFHolographic Lavender

About this palette

Mint Twist to Holographic Lavender is a 4-color pastel, light, cool palette: #9FCCB5 (Mint Twist), #F0C6F2 (Purple’s Baby Sister), #FFC8C9 (Cotton Candy Comet), #E4E4FF (Holographic Lavender). It mixes green, pink, purple tones and feels cool overall. The strongest text pairing is #9FCCB5 on #E4E4FF with a contrast ratio of 1.43:1, and 0 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Mint Twist	rgb(159, 204, 181)	hsl(149, 31%, 71%)
Purple’s Baby Sister	rgb(240, 198, 242)	hsl(297, 63%, 86%)
Cotton Candy Comet	rgb(255, 200, 201)	hsl(359, 100%, 89%)
Holographic Lavender	rgb(228, 228, 255)	hsl(240, 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 Holographic Lavender — https://swatchly.xyz/palette/9fccb5-f0c6f2-ffc8c9-e4e4ff */
:root {
  --mint-twist: #9fccb5;
  --purple-s-baby-sister: #f0c6f2;
  --cotton-candy-comet: #ffc8c9;
  --holographic-lavender: #e4e4ff;
}

Tailwind CSS v4

/* Mint Twist to Holographic Lavender — https://swatchly.xyz/palette/9fccb5-f0c6f2-ffc8c9-e4e4ff */
@theme {
  --color-mint-twist: #9fccb5;
  --color-mint-twist-50: #e3fcee;
  --color-mint-twist-100: #d6f2e3;
  --color-mint-twist-200: #bee0ce;
  --color-mint-twist-300: #9fccb5;
  --color-mint-twist-400: #82ac97;
  --color-mint-twist-500: #66917b;
  --color-mint-twist-600: #4c7662;
  --color-mint-twist-700: #385e4c;
  --color-mint-twist-800: #294a3b;
  --color-mint-twist-900: #1d3a2c;
  --color-mint-twist-950: #0f241b;
  --color-purple-s-baby-sister: #f0c6f2;
  --color-purple-s-baby-sister-50: #feeeff;
  --color-purple-s-baby-sister-100: #fbe0fc;
  --color-purple-s-baby-sister-200: #f0c6f2;
  --color-purple-s-baby-sister-300: #d6b2d7;
  --color-purple-s-baby-sister-400: #b892ba;
  --color-purple-s-baby-sister-500: #9d769f;
  --color-purple-s-baby-sister-600: #815d83;
  --color-purple-s-baby-sister-700: #68476a;
  --color-purple-s-baby-sister-800: #533655;
  --color-purple-s-baby-sister-900: #412942;
  --color-purple-s-baby-sister-950: #29182a;
  --color-cotton-candy-comet: #ffc8c9;
  --color-cotton-candy-comet-50: #fff2f2;
  --color-cotton-candy-comet-100: #ffe4e4;
  --color-cotton-candy-comet-200: #ffc8c9;
  --color-cotton-candy-comet-300: #e2b4b5;
  --color-cotton-candy-comet-400: #c59394;
  --color-cotton-candy-comet-500: #a97779;
  --color-cotton-candy-comet-600: #8c5d5f;
  --color-cotton-candy-comet-700: #72484a;
  --color-cotton-candy-comet-800: #5b3738;
  --color-cotton-candy-comet-900: #48292a;
  --color-cotton-candy-comet-950: #2e1819;
  --color-holographic-lavender: #e4e4ff;
  --color-holographic-lavender-50: #f0f0ff;
  --color-holographic-lavender-100: #e4e4ff;
  --color-holographic-lavender-200: #d2d2e6;
  --color-holographic-lavender-300: #bcbcd2;
  --color-holographic-lavender-400: #9d9db5;
  --color-holographic-lavender-500: #82829a;
  --color-holographic-lavender-600: #696980;
  --color-holographic-lavender-700: #535368;
  --color-holographic-lavender-800: #414052;
  --color-holographic-lavender-900: #313140;
  --color-holographic-lavender-950: #1e1e29;
}