Night Snow to Mint Twist Color Palette

About this palette

Night Snow to Mint Twist is a 5-color pastel, light, cool palette: #B6CAFC (Night Snow), #FFE1C5 (Bisque), #EDFBFF (Cold White), #B3E1D9 (Ice Cube), #9FCCB9 (Mint Twist). It mixes blue, orange, white, turquoise tones and feels cool overall. The strongest text pairing is #EDFBFF on #9FCCB9 with a contrast ratio of 1.68:1, and 0 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Night Snow	rgb(182, 202, 252)	hsl(223, 92%, 85%)
Bisque	rgb(255, 225, 197)	hsl(29, 100%, 89%)
Cold White	rgb(237, 251, 255)	hsl(193, 100%, 96%)
Ice Cube	rgb(179, 225, 217)	hsl(170, 43%, 79%)
Mint Twist	rgb(159, 204, 185)	hsl(155, 31%, 71%)

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 Mint Twist — https://swatchly.xyz/palette/b6cafc-ffe1c5-edfbff-b3e1d9-9fccb9 */
:root {
  --night-snow: #b6cafc;
  --bisque: #ffe1c5;
  --cold-white: #edfbff;
  --ice-cube: #b3e1d9;
  --mint-twist: #9fccb9;
}

Tailwind CSS v4

/* Night Snow to Mint Twist — https://swatchly.xyz/palette/b6cafc-ffe1c5-edfbff-b3e1d9-9fccb9 */
@theme {
  --color-night-snow: #b6cafc;
  --color-night-snow-50: #f8faff;
  --color-night-snow-100: #edf2ff;
  --color-night-snow-200: #d3e0ff;
  --color-night-snow-300: #b6cafc;
  --color-night-snow-400: #97a9d6;
  --color-night-snow-500: #798bba;
  --color-night-snow-600: #5e6f9b;
  --color-night-snow-700: #47577f;
  --color-night-snow-800: #354265;
  --color-night-snow-900: #27324f;
  --color-night-snow-950: #171e33;
  --color-bisque: #ffe1c5;
  --color-bisque-50: #ffeedf;
  --color-bisque-100: #ffe1c5;
  --color-bisque-200: #e6d0bb;
  --color-bisque-300: #d2b9a2;
  --color-bisque-400: #b59a81;
  --color-bisque-500: #9a7f66;
  --color-bisque-600: #7f664d;
  --color-bisque-700: #67503a;
  --color-bisque-800: #523e2a;
  --color-bisque-900: #402f1e;
  --color-bisque-950: #291c11;
  --color-cold-white: #edfbff;
  --color-cold-white-50: #edfbff;
  --color-cold-white-100: #e7eff2;
  --color-cold-white-200: #d1dbde;
  --color-cold-white-300: #b9c5c8;
  --color-cold-white-400: #98a5a8;
  --color-cold-white-500: #7d898d;
  --color-cold-white-600: #626e72;
  --color-cold-white-700: #4d575b;
  --color-cold-white-800: #3b4447;
  --color-cold-white-900: #2c3437;
  --color-cold-white-950: #1b2022;
  --color-ice-cube: #b3e1d9;
  --color-ice-cube-50: #e1faf6;
  --color-ice-cube-100: #d4f1ec;
  --color-ice-cube-200: #b3e1d9;
  --color-ice-cube-300: #a2c9c2;
  --color-ice-cube-400: #80aba3;
  --color-ice-cube-500: #648f88;
  --color-ice-cube-600: #4b756e;
  --color-ice-cube-700: #375d57;
  --color-ice-cube-800: #274a44;
  --color-ice-cube-900: #1c3935;
  --color-ice-cube-950: #0e2421;
  --color-mint-twist: #9fccb9;
  --color-mint-twist-50: #e3fcf1;
  --color-mint-twist-100: #d6f2e6;
  --color-mint-twist-200: #bee0d1;
  --color-mint-twist-300: #9fccb9;
  --color-mint-twist-400: #82ac9a;
  --color-mint-twist-500: #66917f;
  --color-mint-twist-600: #4c7665;
  --color-mint-twist-700: #385e4f;
  --color-mint-twist-800: #294a3d;
  --color-mint-twist-900: #1d392f;
  --color-mint-twist-950: #0f241c;
}