Purple’s Baby Sister to Crushed Ice color palette

F4C1EFPurple’s Baby Sister 9FE1BBBig Spender DBCDB1Tatami FFEBB6Solar C7DBF6Fly a Kite C9FFFACrushed Ice

Open in generator Export PNG, PDF, ASE…

About this palette

Purple’s Baby Sister to Crushed Ice is a 6-color pastel, light, cool palette: #F4C1EF (Purple’s Baby Sister), #9FE1BB (Big Spender), #DBCDB1 (Tatami), #FFEBB6 (Solar), #C7DBF6 (Fly a Kite), #C9FFFA (Crushed Ice). It mixes pink, green, yellow, blue, white tones and feels cool overall. The strongest text pairing is #DBCDB1 on #C9FFFA with a contrast ratio of 1.43:1, and 0 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Purple’s Baby Sister	rgb(244, 193, 239)	hsl(306, 70%, 86%)
Big Spender	rgb(159, 225, 187)	hsl(145, 52%, 75%)
Tatami	rgb(219, 205, 177)	hsl(40, 37%, 78%)
Solar	rgb(255, 235, 182)	hsl(44, 100%, 86%)
Fly a Kite	rgb(199, 219, 246)	hsl(214, 72%, 87%)
Crushed Ice	rgb(201, 255, 250)	hsl(174, 100%, 89%)

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

/* Purple’s Baby Sister to Crushed Ice — https://swatchly.xyz/palette/f4c1ef-9fe1bb-dbcdb1-ffebb6-c7dbf6-c9fffa */
:root {
  --purple-s-baby-sister: #f4c1ef;
  --big-spender: #9fe1bb;
  --tatami: #dbcdb1;
  --solar: #ffebb6;
  --fly-a-kite: #c7dbf6;
  --crushed-ice: #c9fffa;
}

Tailwind CSS v4

/* Purple’s Baby Sister to Crushed Ice — https://swatchly.xyz/palette/f4c1ef-9fe1bb-dbcdb1-ffebb6-c7dbf6-c9fffa */
@theme {
  --color-purple-s-baby-sister: #f4c1ef;
  --color-purple-s-baby-sister-50: #ffecfd;
  --color-purple-s-baby-sister-100: #fedcfa;
  --color-purple-s-baby-sister-200: #f4c1ef;
  --color-purple-s-baby-sister-300: #d9aed5;
  --color-purple-s-baby-sister-400: #bc8eb8;
  --color-purple-s-baby-sister-500: #a1729d;
  --color-purple-s-baby-sister-600: #855982;
  --color-purple-s-baby-sister-700: #6d4569;
  --color-purple-s-baby-sister-800: #573454;
  --color-purple-s-baby-sister-900: #442742;
  --color-purple-s-baby-sister-950: #2c162a;
  --color-big-spender: #9fe1bb;
  --color-big-spender-50: #d4fbe3;
  --color-big-spender-100: #c5f0d7;
  --color-big-spender-200: #9fe1bb;
  --color-big-spender-300: #91caa9;
  --color-big-spender-400: #6eac89;
  --color-big-spender-500: #52926f;
  --color-big-spender-600: #3a7857;
  --color-big-spender-700: #276144;
  --color-big-spender-800: #194e34;
  --color-big-spender-900: #0e3c27;
  --color-big-spender-950: #052616;
  --color-tatami: #dbcdb1;
  --color-tatami-50: #f7eedd;
  --color-tatami-100: #ece3d0;
  --color-tatami-200: #dbcdb1;
  --color-tatami-300: #c4b8a0;
  --color-tatami-400: #a79a80;
  --color-tatami-500: #8d8167;
  --color-tatami-600: #74684f;
  --color-tatami-700: #5e533c;
  --color-tatami-800: #4b412d;
  --color-tatami-900: #3a3221;
  --color-tatami-950: #241e12;
  --color-solar: #ffebb6;
  --color-solar-50: #fff6dd;
  --color-solar-100: #ffebb6;
  --color-solar-200: #e6d8b2;
  --color-solar-300: #d1c195;
  --color-solar-400: #b3a170;
  --color-solar-500: #978553;
  --color-solar-600: #7c6a3a;
  --color-solar-700: #645427;
  --color-solar-800: #4f4119;
  --color-solar-900: #3d310f;
  --color-solar-950: #271e06;
  --color-fly-a-kite: #c7dbf6;
  --color-fly-a-kite-50: #f1f7ff;
  --color-fly-a-kite-100: #e1eeff;
  --color-fly-a-kite-200: #c7dbf6;
  --color-fly-a-kite-300: #b3c4da;
  --color-fly-a-kite-400: #92a4bd;
  --color-fly-a-kite-500: #7688a1;
  --color-fly-a-kite-600: #5c6e85;
  --color-fly-a-kite-700: #47576c;
  --color-fly-a-kite-800: #364356;
  --color-fly-a-kite-900: #283443;
  --color-fly-a-kite-950: #18202b;
  --color-crushed-ice: #c9fffa;
  --color-crushed-ice-50: #c9fffa;
  --color-crushed-ice-100: #d0f1ee;
  --color-crushed-ice-200: #b8dfdb;
  --color-crushed-ice-300: #9dcac6;
  --color-crushed-ice-400: #7aaca7;
  --color-crushed-ice-500: #5e918d;
  --color-crushed-ice-600: #457672;
  --color-crushed-ice-700: #315e5b;
  --color-crushed-ice-800: #224a47;
  --color-crushed-ice-900: #173a37;
  --color-crushed-ice-950: #0b2422;
}