Blushing Sky to Creamy Vanilla Color Palette

About this palette

Blushing Sky to Creamy Vanilla is a 4-color pastel, light, cool palette: #D3B1E5 (Blushing Sky), #CBCFFF (Innocent Snowdrop), #C2E5F4 (Breaking the Ice), #F5E4BD (Creamy Vanilla). It mixes purple, blue, yellow tones and feels cool overall. The strongest text pairing is #D3B1E5 on #F5E4BD with a contrast ratio of 1.49:1, and 0 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Blushing Sky	rgb(211, 177, 229)	hsl(279, 50%, 80%)
Innocent Snowdrop	rgb(203, 207, 255)	hsl(235, 100%, 90%)
Breaking the Ice	rgb(194, 229, 244)	hsl(198, 69%, 86%)
Creamy Vanilla	rgb(245, 228, 189)	hsl(42, 74%, 85%)

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

/* Blushing Sky to Creamy Vanilla — https://swatchly.xyz/palette/d3b1e5-cbcfff-c2e5f4-f5e4bd */
:root {
  --blushing-sky: #d3b1e5;
  --innocent-snowdrop: #cbcfff;
  --breaking-the-ice: #c2e5f4;
  --creamy-vanilla: #f5e4bd;
}

Tailwind CSS v4

/* Blushing Sky to Creamy Vanilla — https://swatchly.xyz/palette/d3b1e5-cbcfff-c2e5f4-f5e4bd */
@theme {
  --color-blushing-sky: #d3b1e5;
  --color-blushing-sky-50: #faf1ff;
  --color-blushing-sky-100: #f5e3ff;
  --color-blushing-sky-200: #e5ccf3;
  --color-blushing-sky-300: #d3b1e5;
  --color-blushing-sky-400: #b293c3;
  --color-blushing-sky-500: #9777a8;
  --color-blushing-sky-600: #7c5d8c;
  --color-blushing-sky-700: #644872;
  --color-blushing-sky-800: #4f375b;
  --color-blushing-sky-900: #3e2948;
  --color-blushing-sky-950: #27182f;
  --color-innocent-snowdrop: #cbcfff;
  --color-innocent-snowdrop-50: #f0f1ff;
  --color-innocent-snowdrop-100: #e3e6ff;
  --color-innocent-snowdrop-200: #cbcfff;
  --color-innocent-snowdrop-300: #b6bae3;
  --color-innocent-snowdrop-400: #979bc7;
  --color-innocent-snowdrop-500: #7d80ac;
  --color-innocent-snowdrop-600: #646690;
  --color-innocent-snowdrop-700: #4f5176;
  --color-innocent-snowdrop-800: #3d3f60;
  --color-innocent-snowdrop-900: #2e304b;
  --color-innocent-snowdrop-950: #1c1d31;
  --color-breaking-the-ice: #c2e5f4;
  --color-breaking-the-ice-50: #f3fbff;
  --color-breaking-the-ice-100: #e1f5fe;
  --color-breaking-the-ice-200: #c2e5f4;
  --color-breaking-the-ice-300: #b0ccd8;
  --color-breaking-the-ice-400: #8cacb9;
  --color-breaking-the-ice-500: #6f8f9d;
  --color-breaking-the-ice-600: #547380;
  --color-breaking-the-ice-700: #3e5b67;
  --color-breaking-the-ice-800: #2d4651;
  --color-breaking-the-ice-900: #21363f;
  --color-breaking-the-ice-950: #122228;
  --color-creamy-vanilla: #f5e4bd;
  --color-creamy-vanilla-50: #f9f0d9;
  --color-creamy-vanilla-100: #f5e4bd;
  --color-creamy-vanilla-200: #ded2b4;
  --color-creamy-vanilla-300: #cabc9b;
  --color-creamy-vanilla-400: #ad9d7a;
  --color-creamy-vanilla-500: #92835f;
  --color-creamy-vanilla-600: #786947;
  --color-creamy-vanilla-700: #615434;
  --color-creamy-vanilla-800: #4d4125;
  --color-creamy-vanilla-900: #3c321a;
  --color-creamy-vanilla-950: #261e0d;
}