Midnight Ocean to Night Snow Color Palette

About this palette

Midnight Ocean to Night Snow is a 5-color cool palette: #182C48 (Midnight Ocean), #5B3866 (Purple Protégé), #63804D (Kale), #D49A4F (Mayan Treasure), #A4CCFF (Night Snow). It mixes blue, purple, green, orange tones and feels cool overall. The strongest text pairing is #182C48 on #A4CCFF with a contrast ratio of 8.48:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Midnight Ocean	rgb(24, 44, 72)	hsl(215, 50%, 19%)
Purple Protégé	rgb(91, 56, 102)	hsl(286, 29%, 31%)
Kale	rgb(99, 128, 77)	hsl(94, 25%, 40%)
Mayan Treasure	rgb(212, 154, 79)	hsl(34, 61%, 57%)
Night Snow	rgb(164, 204, 255)	hsl(214, 100%, 82%)

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.48:1 Very good#182C48 on #A4CCFF
Aa8.48:1 Very good#A4CCFF on #182C48
Aa5.75:1 Good#5B3866 on #A4CCFF
Aa5.75:1 Good#A4CCFF on #5B3866
Aa5.72:1 Good#182C48 on #D49A4F
Aa5.72:1 Good#D49A4F on #182C48
Aa3.88:1 Poor#5B3866 on #D49A4F
Aa3.88:1 Poor#D49A4F on #5B3866

Color blindness preview

CSS variables

/* Midnight Ocean to Night Snow — https://swatchly.xyz/palette/182c48-5b3866-63804d-d49a4f-a4ccff */
:root {
  --midnight-ocean: #182c48;
  --purple-prot-g: #5b3866;
  --kale: #63804d;
  --mayan-treasure: #d49a4f;
  --night-snow: #a4ccff;
}

Tailwind CSS v4

/* Midnight Ocean to Night Snow — https://swatchly.xyz/palette/182c48-5b3866-63804d-d49a4f-a4ccff */
@theme {
  --color-midnight-ocean: #182c48;
  --color-midnight-ocean-50: #eff6ff;
  --color-midnight-ocean-100: #dfecff;
  --color-midnight-ocean-200: #c6d9f4;
  --color-midnight-ocean-300: #adc3e1;
  --color-midnight-ocean-400: #8aa2c3;
  --color-midnight-ocean-500: #6d85a6;
  --color-midnight-ocean-600: #536988;
  --color-midnight-ocean-700: #3e516d;
  --color-midnight-ocean-800: #2c3d54;
  --color-midnight-ocean-900: #182c48;
  --color-midnight-ocean-950: #111a27;
  --color-purple-prot-g: #5b3866;
  --color-purple-prot-g-50: #fbf1ff;
  --color-purple-prot-g-100: #f8e2ff;
  --color-purple-prot-g-200: #e9cbf3;
  --color-purple-prot-g-300: #d6b4e1;
  --color-purple-prot-g-400: #b994c5;
  --color-purple-prot-g-500: #9f79ab;
  --color-purple-prot-g-600: #856090;
  --color-purple-prot-g-700: #6d4b78;
  --color-purple-prot-g-800: #5b3866;
  --color-purple-prot-g-900: #452c4e;
  --color-purple-prot-g-950: #2d1a33;
  --color-kale: #63804d;
  --color-kale-50: #eafcdd;
  --color-kale-100: #e1f5d3;
  --color-kale-200: #cde4bc;
  --color-kale-300: #b6d0a3;
  --color-kale-400: #96b381;
  --color-kale-500: #7c9a66;
  --color-kale-600: #63804d;
  --color-kale-700: #4c6637;
  --color-kale-800: #395027;
  --color-kale-900: #2a3e1a;
  --color-kale-950: #19270d;
  --color-mayan-treasure: #d49a4f;
  --color-mayan-treasure-50: #fff5ea;
  --color-mayan-treasure-100: #ffead3;
  --color-mayan-treasure-200: #fed39f;
  --color-mayan-treasure-300: #edbb7f;
  --color-mayan-treasure-400: #d49a4f;
  --color-mayan-treasure-500: #b67d31;
  --color-mayan-treasure-600: #986208;
  --color-mayan-treasure-700: #794d00;
  --color-mayan-treasure-800: #5f3b00;
  --color-mayan-treasure-900: #492c00;
  --color-mayan-treasure-950: #2e1a00;
  --color-night-snow: #a4ccff;
  --color-night-snow-50: #f5faff;
  --color-night-snow-100: #e7f2ff;
  --color-night-snow-200: #c9e1ff;
  --color-night-snow-300: #a4ccff;
  --color-night-snow-400: #86abd9;
  --color-night-snow-500: #688ebd;
  --color-night-snow-600: #4d719f;
  --color-night-snow-700: #385982;
  --color-night-snow-800: #284568;
  --color-night-snow-900: #1b3452;
  --color-night-snow-950: #0e2035;
}