Night Snow to Strawberry Blonde color palette

A7C8F7Night Snow DFC0ADMuddy Rose C2DCB6Ambrosia E3CFF3Bubblegum Crisis DDF7B6Frosted Mint Hills FFDCE0Strawberry Blonde

Open in generator Export PNG, PDF, ASE…

About this palette

Night Snow to Strawberry Blonde is a 6-color pastel, light, cool palette: #A7C8F7 (Night Snow), #DFC0AD (Muddy Rose), #C2DCB6 (Ambrosia), #E3CFF3 (Bubblegum Crisis), #DDF7B6 (Frosted Mint Hills), #FFDCE0 (Strawberry Blonde). It mixes blue, orange, green, purple, pink tones and feels cool overall. The strongest text pairing is #A7C8F7 on #DDF7B6 with a contrast ratio of 1.47:1, and 0 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Night Snow	rgb(167, 200, 247)	hsl(215, 83%, 81%)
Muddy Rose	rgb(223, 192, 173)	hsl(23, 44%, 78%)
Ambrosia	rgb(194, 220, 182)	hsl(101, 35%, 79%)
Bubblegum Crisis	rgb(227, 207, 243)	hsl(273, 60%, 88%)
Frosted Mint Hills	rgb(221, 247, 182)	hsl(84, 80%, 84%)
Strawberry Blonde	rgb(255, 220, 224)	hsl(353, 100%, 93%)

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

/* Night Snow to Strawberry Blonde — https://swatchly.xyz/palette/a7c8f7-dfc0ad-c2dcb6-e3cff3-ddf7b6-ffdce0 */
:root {
  --night-snow: #a7c8f7;
  --muddy-rose: #dfc0ad;
  --ambrosia: #c2dcb6;
  --bubblegum-crisis: #e3cff3;
  --frosted-mint-hills: #ddf7b6;
  --strawberry-blonde: #ffdce0;
}

Tailwind CSS v4

/* Night Snow to Strawberry Blonde — https://swatchly.xyz/palette/a7c8f7-dfc0ad-c2dcb6-e3cff3-ddf7b6-ffdce0 */
@theme {
  --color-night-snow: #a7c8f7;
  --color-night-snow-50: #f3f8ff;
  --color-night-snow-100: #e5efff;
  --color-night-snow-200: #c6deff;
  --color-night-snow-300: #a7c8f7;
  --color-night-snow-400: #89a7d3;
  --color-night-snow-500: #6c8bb7;
  --color-night-snow-600: #526f99;
  --color-night-snow-700: #3d587e;
  --color-night-snow-800: #2d4465;
  --color-night-snow-900: #20334f;
  --color-night-snow-950: #122033;
  --color-muddy-rose: #dfc0ad;
  --color-muddy-rose-50: #fff6f1;
  --color-muddy-rose-100: #feebe0;
  --color-muddy-rose-200: #eed8ca;
  --color-muddy-rose-300: #dfc0ad;
  --color-muddy-rose-400: #bca08f;
  --color-muddy-rose-500: #a08371;
  --color-muddy-rose-600: #836857;
  --color-muddy-rose-700: #6a5142;
  --color-muddy-rose-800: #533e31;
  --color-muddy-rose-900: #402e23;
  --color-muddy-rose-950: #291c14;
  --color-ambrosia: #c2dcb6;
  --color-ambrosia-50: #e8f7e1;
  --color-ambrosia-100: #dcedd5;
  --color-ambrosia-200: #c2dcb6;
  --color-ambrosia-300: #afc5a5;
  --color-ambrosia-400: #8fa784;
  --color-ambrosia-500: #748c69;
  --color-ambrosia-600: #5c7251;
  --color-ambrosia-700: #475c3d;
  --color-ambrosia-800: #37482e;
  --color-ambrosia-900: #293821;
  --color-ambrosia-950: #182313;
  --color-bubblegum-crisis: #e3cff3;
  --color-bubblegum-crisis-50: #f9f2ff;
  --color-bubblegum-crisis-100: #f2e6fd;
  --color-bubblegum-crisis-200: #e3cff3;
  --color-bubblegum-crisis-300: #cabad8;
  --color-bubblegum-crisis-400: #ac9aba;
  --color-bubblegum-crisis-500: #907e9f;
  --color-bubblegum-crisis-600: #756483;
  --color-bubblegum-crisis-700: #5e4e6a;
  --color-bubblegum-crisis-800: #4a3c54;
  --color-bubblegum-crisis-900: #392d42;
  --color-bubblegum-crisis-950: #241b2a;
  --color-frosted-mint-hills: #ddf7b6;
  --color-frosted-mint-hills-50: #edfcd9;
  --color-frosted-mint-hills-100: #ddf7b6;
  --color-frosted-mint-hills-200: #cde0b1;
  --color-frosted-mint-hills-300: #b5cb95;
  --color-frosted-mint-hills-400: #95ac71;
  --color-frosted-mint-hills-500: #799054;
  --color-frosted-mint-hills-600: #5f753a;
  --color-frosted-mint-hills-700: #4a5d27;
  --color-frosted-mint-hills-800: #394919;
  --color-frosted-mint-hills-900: #2b390f;
  --color-frosted-mint-hills-950: #192306;
  --color-strawberry-blonde: #ffdce0;
  --color-strawberry-blonde-50: #ffebed;
  --color-strawberry-blonde-100: #ffdce0;
  --color-strawberry-blonde-200: #e6cccf;
  --color-strawberry-blonde-300: #d2b5b8;
  --color-strawberry-blonde-400: #b5969a;
  --color-strawberry-blonde-500: #9b7b7f;
  --color-strawberry-blonde-600: #806266;
  --color-strawberry-blonde-700: #684d51;
  --color-strawberry-blonde-800: #523b3e;
  --color-strawberry-blonde-900: #402d2f;
  --color-strawberry-blonde-950: #291b1d;
}