Cotton Boll to Innocent Snowdrop color palette

E1ECFFCotton Boll F6BCA4Cream Puff 9AE7FFWinter Wizard D7F8D7Hint of Mint D1CDFFInnocent Snowdrop

About this palette

Cotton Boll to Innocent Snowdrop is a 5-color pastel, light, cool palette: #E1ECFF (Cotton Boll), #F6BCA4 (Cream Puff), #9AE7FF (Winter Wizard), #D7F8D7 (Hint of Mint), #D1CDFF (Innocent Snowdrop). It mixes white, orange, blue, purple tones and feels cool overall. The strongest text pairing is #F6BCA4 on #D7F8D7 with a contrast ratio of 1.45:1, and 0 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Cotton Boll	rgb(225, 236, 255)	hsl(218, 100%, 94%)
Cream Puff	rgb(246, 188, 164)	hsl(18, 82%, 80%)
Winter Wizard	rgb(154, 231, 255)	hsl(194, 100%, 80%)
Hint of Mint	rgb(215, 248, 215)	hsl(120, 70%, 91%)
Innocent Snowdrop	rgb(209, 205, 255)	hsl(245, 100%, 90%)

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

/* Cotton Boll to Innocent Snowdrop — https://swatchly.xyz/palette/e1ecff-f6bca4-9ae7ff-d7f8d7-d1cdff */
:root {
  --cotton-boll: #e1ecff;
  --cream-puff: #f6bca4;
  --winter-wizard: #9ae7ff;
  --hint-of-mint: #d7f8d7;
  --innocent-snowdrop: #d1cdff;
}

Tailwind CSS v4

/* Cotton Boll to Innocent Snowdrop — https://swatchly.xyz/palette/e1ecff-f6bca4-9ae7ff-d7f8d7-d1cdff */
@theme {
  --color-cotton-boll: #e1ecff;
  --color-cotton-boll-50: #f0f6ff;
  --color-cotton-boll-100: #e1ecff;
  --color-cotton-boll-200: #d0d8e6;
  --color-cotton-boll-300: #b8c2d1;
  --color-cotton-boll-400: #98a2b3;
  --color-cotton-boll-500: #7d8798;
  --color-cotton-boll-600: #636c7c;
  --color-cotton-boll-700: #4d5664;
  --color-cotton-boll-800: #3b434f;
  --color-cotton-boll-900: #2d333e;
  --color-cotton-boll-950: #1b1f27;
  --color-cream-puff: #f6bca4;
  --color-cream-puff-50: #fff9f6;
  --color-cream-puff-100: #ffeee7;
  --color-cream-puff-200: #ffd6c5;
  --color-cream-puff-300: #f6bca4;
  --color-cream-puff-400: #d09c86;
  --color-cream-puff-500: #b37e68;
  --color-cream-puff-600: #95624d;
  --color-cream-puff-700: #794b37;
  --color-cream-puff-800: #603827;
  --color-cream-puff-900: #4a291b;
  --color-cream-puff-950: #30180e;
  --color-winter-wizard: #9ae7ff;
  --color-winter-wizard-50: #eafaff;
  --color-winter-wizard-100: #d1f4ff;
  --color-winter-wizard-200: #9ae7ff;
  --color-winter-wizard-300: #8fcee2;
  --color-winter-wizard-400: #67afc5;
  --color-winter-wizard-500: #4693a9;
  --color-winter-wizard-600: #29778d;
  --color-winter-wizard-700: #115f73;
  --color-winter-wizard-800: #004b5b;
  --color-winter-wizard-900: #003947;
  --color-winter-wizard-950: #00242d;
  --color-hint-of-mint: #d7f8d7;
  --color-hint-of-mint-50: #ebfdeb;
  --color-hint-of-mint-100: #d7f8d7;
  --color-hint-of-mint-200: #c9e1c9;
  --color-hint-of-mint-300: #b0cbb0;
  --color-hint-of-mint-400: #8eac8e;
  --color-hint-of-mint-500: #729072;
  --color-hint-of-mint-600: #587559;
  --color-hint-of-mint-700: #435d44;
  --color-hint-of-mint-800: #324933;
  --color-hint-of-mint-900: #253926;
  --color-hint-of-mint-950: #152316;
  --color-innocent-snowdrop: #d1cdff;
  --color-innocent-snowdrop-50: #f1f1ff;
  --color-innocent-snowdrop-100: #e6e5ff;
  --color-innocent-snowdrop-200: #d1cdff;
  --color-innocent-snowdrop-300: #bbb8e3;
  --color-innocent-snowdrop-400: #9d99c7;
  --color-innocent-snowdrop-500: #827eac;
  --color-innocent-snowdrop-600: #696490;
  --color-innocent-snowdrop-700: #534f76;
  --color-innocent-snowdrop-800: #413d5f;
  --color-innocent-snowdrop-900: #322e4b;
  --color-innocent-snowdrop-950: #1e1c31;
}