Night Snow to Slightly in Love Color Palette

About this palette

Night Snow to Slightly in Love is a 4-color pastel, light palette: #AFCEFF (Night Snow), #E8D5AE (Anise Biscotti), #FFD9FD (Grape Taffy), #FFE7DB (Slightly in Love). It mixes blue, yellow, pink, white tones and feels cool overall. The strongest text pairing is #AFCEFF on #FFE7DB with a contrast ratio of 1.35:1, and 0 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Night Snow	rgb(175, 206, 255)	hsl(217, 100%, 84%)
Anise Biscotti	rgb(232, 213, 174)	hsl(40, 56%, 80%)
Grape Taffy	rgb(255, 217, 253)	hsl(303, 100%, 93%)
Slightly in Love	rgb(255, 231, 219)	hsl(20, 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 Slightly in Love — https://swatchly.xyz/palette/afceff-e8d5ae-ffd9fd-ffe7db */
:root {
  --night-snow: #afceff;
  --anise-biscotti: #e8d5ae;
  --grape-taffy: #ffd9fd;
  --slightly-in-love: #ffe7db;
}

Tailwind CSS v4

/* Night Snow to Slightly in Love — https://swatchly.xyz/palette/afceff-e8d5ae-ffd9fd-ffe7db */
@theme {
  --color-night-snow: #afceff;
  --color-night-snow-50: #e4eeff;
  --color-night-snow-100: #d1e3ff;
  --color-night-snow-200: #afceff;
  --color-night-snow-300: #9eb9e4;
  --color-night-snow-400: #7f9cc9;
  --color-night-snow-500: #6682af;
  --color-night-snow-600: #4e6994;
  --color-night-snow-700: #3c547b;
  --color-night-snow-800: #2d4365;
  --color-night-snow-900: #213350;
  --color-night-snow-950: #121f34;
  --color-anise-biscotti: #e8d5ae;
  --color-anise-biscotti-50: #fef4de;
  --color-anise-biscotti-100: #f5ead1;
  --color-anise-biscotti-200: #e8d5ae;
  --color-anise-biscotti-300: #cfbf9e;
  --color-anise-biscotti-400: #b19f7b;
  --color-anise-biscotti-500: #95845f;
  --color-anise-biscotti-600: #7a6947;
  --color-anise-biscotti-700: #625333;
  --color-anise-biscotti-800: #4e4124;
  --color-anise-biscotti-900: #3c3119;
  --color-anise-biscotti-950: #261e0d;
  --color-grape-taffy: #ffd9fd;
  --color-grape-taffy-50: #ffeafe;
  --color-grape-taffy-100: #ffd9fd;
  --color-grape-taffy-200: #e6cae5;
  --color-grape-taffy-300: #d2b2d1;
  --color-grape-taffy-400: #b593b3;
  --color-grape-taffy-500: #9a7898;
  --color-grape-taffy-600: #7f5f7e;
  --color-grape-taffy-700: #674a66;
  --color-grape-taffy-800: #523851;
  --color-grape-taffy-900: #402a3f;
  --color-grape-taffy-950: #281928;
  --color-slightly-in-love: #ffe7db;
  --color-slightly-in-love-50: #fff4ee;
  --color-slightly-in-love-100: #ffe7db;
  --color-slightly-in-love-200: #e6d5cc;
  --color-slightly-in-love-300: #d1bdb3;
  --color-slightly-in-love-400: #b29d92;
  --color-slightly-in-love-500: #978177;
  --color-slightly-in-love-600: #7b675d;
  --color-slightly-in-love-700: #635148;
  --color-slightly-in-love-800: #4e3e36;
  --color-slightly-in-love-900: #3d3029;
  --color-slightly-in-love-950: #261d18;
}