Cream Puff to Pink Glitter Color Palette

About this palette

Cream Puff to Pink Glitter is a 4-color pastel, light palette: #F7BEA0 (Cream Puff), #D6C2FB (Innocent Snowdrop), #CEDDFF (Icy Plains), #FFDDD5 (Pink Glitter). It mixes orange, purple, blue, pink tones and feels balanced overall. The strongest text pairing is #F7BEA0 on #FFDDD5 with a contrast ratio of 1.29:1, and 0 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Cream Puff	rgb(247, 190, 160)	hsl(21, 84%, 80%)
Innocent Snowdrop	rgb(214, 194, 251)	hsl(261, 88%, 87%)
Icy Plains	rgb(206, 221, 255)	hsl(222, 100%, 90%)
Pink Glitter	rgb(255, 221, 213)	hsl(11, 100%, 92%)

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

/* Cream Puff to Pink Glitter — https://swatchly.xyz/palette/f7bea0-d6c2fb-ceddff-ffddd5 */
:root {
  --cream-puff: #f7bea0;
  --innocent-snowdrop: #d6c2fb;
  --icy-plains: #ceddff;
  --pink-glitter: #ffddd5;
}

Tailwind CSS v4

/* Cream Puff to Pink Glitter — https://swatchly.xyz/palette/f7bea0-d6c2fb-ceddff-ffddd5 */
@theme {
  --color-cream-puff: #f7bea0;
  --color-cream-puff-50: #ffe8dd;
  --color-cream-puff-100: #ffd9c5;
  --color-cream-puff-200: #f7bea0;
  --color-cream-puff-300: #ddab91;
  --color-cream-puff-400: #c18d71;
  --color-cream-puff-500: #a77357;
  --color-cream-puff-600: #8c5b40;
  --color-cream-puff-700: #73472f;
  --color-cream-puff-800: #5e3722;
  --color-cream-puff-900: #4a2917;
  --color-cream-puff-950: #30180b;
  --color-innocent-snowdrop: #d6c2fb;
  --color-innocent-snowdrop-50: #f1eaff;
  --color-innocent-snowdrop-100: #e8dcff;
  --color-innocent-snowdrop-200: #d6c2fb;
  --color-innocent-snowdrop-300: #c0afe0;
  --color-innocent-snowdrop-400: #a390c5;
  --color-innocent-snowdrop-500: #8a76ab;
  --color-innocent-snowdrop-600: #705e90;
  --color-innocent-snowdrop-700: #5b4a77;
  --color-innocent-snowdrop-800: #483961;
  --color-innocent-snowdrop-900: #382b4d;
  --color-innocent-snowdrop-950: #231a32;
  --color-icy-plains: #ceddff;
  --color-icy-plains-50: #f6f9ff;
  --color-icy-plains-100: #e9f0ff;
  --color-icy-plains-200: #ceddff;
  --color-icy-plains-300: #b9c5e1;
  --color-icy-plains-400: #97a5c3;
  --color-icy-plains-500: #7b88a7;
  --color-icy-plains-600: #606d8a;
  --color-icy-plains-700: #4a5670;
  --color-icy-plains-800: #384259;
  --color-icy-plains-900: #2a3246;
  --color-icy-plains-950: #191f2d;
  --color-pink-glitter: #ffddd5;
  --color-pink-glitter-50: #ffece7;
  --color-pink-glitter-100: #ffddd5;
  --color-pink-glitter-200: #e6ccc6;
  --color-pink-glitter-300: #d3b6af;
  --color-pink-glitter-400: #b59790;
  --color-pink-glitter-500: #9b7c75;
  --color-pink-glitter-600: #80635d;
  --color-pink-glitter-700: #684e48;
  --color-pink-glitter-800: #533c37;
  --color-pink-glitter-900: #402e29;
  --color-pink-glitter-950: #291b18;
}