Night Snow to Marine Color Palette

About this palette

Night Snow to Marine is a 4-color cool, gradient palette: #B1D0FF (Night Snow), #D757FC (Flaming Flamingo), #464496 (Galaxy Express), #00305B (Marine). It mixes blue, purple tones and feels cool overall. The strongest text pairing is #B1D0FF on #00305B with a contrast ratio of 8.47:1, and 2 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Night Snow	rgb(177, 208, 255)	hsl(216, 100%, 85%)
Flaming Flamingo	rgb(215, 87, 252)	hsl(287, 96%, 66%)
Galaxy Express	rgb(70, 68, 150)	hsl(241, 38%, 43%)
Marine	rgb(0, 48, 91)	hsl(208, 100%, 18%)

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.

Aa8.47:1 Very good#B1D0FF on #00305B
Aa8.47:1 Very good#00305B on #B1D0FF
Aa5.28:1 Good#B1D0FF on #464496
Aa5.28:1 Good#464496 on #B1D0FF
Aa4.23:1 Poor#D757FC on #00305B
Aa4.23:1 Poor#00305B on #D757FC

Color blindness preview

CSS variables

/* Night Snow to Marine — https://swatchly.xyz/palette/b1d0ff-d757fc-464496-00305b */
:root {
  --night-snow: #b1d0ff;
  --flaming-flamingo: #d757fc;
  --galaxy-express: #464496;
  --marine: #00305b;
}

Tailwind CSS v4

/* Night Snow to Marine — https://swatchly.xyz/palette/b1d0ff-d757fc-464496-00305b */
@theme {
  --color-night-snow: #b1d0ff;
  --color-night-snow-50: #e5f0ff;
  --color-night-snow-100: #d3e5ff;
  --color-night-snow-200: #b1d0ff;
  --color-night-snow-300: #a0bbe4;
  --color-night-snow-400: #809dc8;
  --color-night-snow-500: #6783ae;
  --color-night-snow-600: #4f6a93;
  --color-night-snow-700: #3c557a;
  --color-night-snow-800: #2e4363;
  --color-night-snow-900: #21334f;
  --color-night-snow-950: #121f33;
  --color-flaming-flamingo: #d757fc;
  --color-flaming-flamingo-50: #fbedff;
  --color-flaming-flamingo-100: #f7ddff;
  --color-flaming-flamingo-200: #efbeff;
  --color-flaming-flamingo-300: #e697ff;
  --color-flaming-flamingo-400: #d757fc;
  --color-flaming-flamingo-500: #ba36de;
  --color-flaming-flamingo-600: #9d0ebf;
  --color-flaming-flamingo-700: #7f009c;
  --color-flaming-flamingo-800: #65007c;
  --color-flaming-flamingo-900: #500063;
  --color-flaming-flamingo-950: #340042;
  --color-galaxy-express: #464496;
  --color-galaxy-express-50: #f3f4ff;
  --color-galaxy-express-100: #e7e9ff;
  --color-galaxy-express-200: #ced3ff;
  --color-galaxy-express-300: #b3b8ff;
  --color-galaxy-express-400: #9195ec;
  --color-galaxy-express-500: #7578cf;
  --color-galaxy-express-600: #5c5daf;
  --color-galaxy-express-700: #464496;
  --color-galaxy-express-800: #363575;
  --color-galaxy-express-900: #29285e;
  --color-galaxy-express-950: #18173e;
  --color-marine: #00305b;
  --color-marine-50: #eef6ff;
  --color-marine-100: #ddedff;
  --color-marine-200: #bbdbff;
  --color-marine-300: #9cc5f2;
  --color-marine-400: #78a5d6;
  --color-marine-500: #5b88ba;
  --color-marine-600: #416d9c;
  --color-marine-700: #2e557f;
  --color-marine-800: #1f4165;
  --color-marine-900: #00305b;
  --color-marine-950: #091e33;
}