Night Snow to Melancholia Color Palette

About this palette

Night Snow to Melancholia is a 5-color cool palette: #A7C6FF (Night Snow), #79B884 (Frog Pond), #CD3242 (Bento Box), #454F88 (Twilight), #00380B (Melancholia). It mixes blue, green, red tones and feels cool overall. The strongest text pairing is #A7C6FF on #00380B with a contrast ratio of 7.75:1, and 2 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Night Snow	rgb(167, 198, 255)	hsl(219, 100%, 83%)
Frog Pond	rgb(121, 184, 132)	hsl(130, 31%, 60%)
Bento Box	rgb(205, 50, 66)	hsl(354, 61%, 50%)
Twilight	rgb(69, 79, 136)	hsl(231, 33%, 40%)
Melancholia	rgb(0, 56, 11)	hsl(132, 100%, 11%)

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.

Aa7.75:1 Very good#A7C6FF on #00380B
Aa7.75:1 Very good#00380B on #A7C6FF
Aa5.73:1 Good#79B884 on #00380B
Aa5.73:1 Good#00380B on #79B884
Aa4.46:1 Poor#A7C6FF on #454F88
Aa4.46:1 Poor#454F88 on #A7C6FF
Aa3.30:1 Poor#79B884 on #454F88
Aa3.30:1 Poor#454F88 on #79B884

Color blindness preview

CSS variables

/* Night Snow to Melancholia — https://swatchly.xyz/palette/a7c6ff-79b884-cd3242-454f88-00380b */
:root {
  --night-snow: #a7c6ff;
  --frog-pond: #79b884;
  --bento-box: #cd3242;
  --twilight: #454f88;
  --melancholia: #00380b;
}

Tailwind CSS v4

/* Night Snow to Melancholia — https://swatchly.xyz/palette/a7c6ff-79b884-cd3242-454f88-00380b */
@theme {
  --color-night-snow: #a7c6ff;
  --color-night-snow-50: #f4f8ff;
  --color-night-snow-100: #e6efff;
  --color-night-snow-200: #c9dcff;
  --color-night-snow-300: #a7c6ff;
  --color-night-snow-400: #89a6da;
  --color-night-snow-500: #6c89be;
  --color-night-snow-600: #526da0;
  --color-night-snow-700: #3e5684;
  --color-night-snow-800: #2d426a;
  --color-night-snow-900: #203254;
  --color-night-snow-950: #121f37;
  --color-frog-pond: #79b884;
  --color-frog-pond-50: #e5ffe9;
  --color-frog-pond-100: #d3fad8;
  --color-frog-pond-200: #bbe9c1;
  --color-frog-pond-300: #a0d5a8;
  --color-frog-pond-400: #79b884;
  --color-frog-pond-500: #5d9b69;
  --color-frog-pond-600: #427e4e;
  --color-frog-pond-700: #2d653a;
  --color-frog-pond-800: #1d5029;
  --color-frog-pond-900: #123e1d;
  --color-frog-pond-950: #07260f;
  --color-bento-box: #cd3242;
  --color-bento-box-50: #fff1f1;
  --color-bento-box-100: #ffe6e5;
  --color-bento-box-200: #ffcdcb;
  --color-bento-box-300: #ffadab;
  --color-bento-box-400: #ff787b;
  --color-bento-box-500: #eb515b;
  --color-bento-box-600: #cd3242;
  --color-bento-box-700: #ab142d;
  --color-bento-box-800: #8b001f;
  --color-bento-box-900: #6c0016;
  --color-bento-box-950: #47000b;
  --color-twilight: #454f88;
  --color-twilight-50: #f2f5ff;
  --color-twilight-100: #e5eaff;
  --color-twilight-200: #cbd5ff;
  --color-twilight-300: #b0bdf5;
  --color-twilight-400: #909dda;
  --color-twilight-500: #7481be;
  --color-twilight-600: #5b66a0;
  --color-twilight-700: #454f88;
  --color-twilight-800: #353d6b;
  --color-twilight-900: #282f55;
  --color-twilight-950: #171c38;
  --color-melancholia: #00380b;
  --color-melancholia-50: #e1ffe1;
  --color-melancholia-100: #d4f6d5;
  --color-melancholia-200: #bce4bd;
  --color-melancholia-300: #a1cfa3;
  --color-melancholia-400: #7daf7f;
  --color-melancholia-500: #5f9362;
  --color-melancholia-600: #457648;
  --color-melancholia-700: #305d34;
  --color-melancholia-800: #214724;
  --color-melancholia-900: #00380b;
  --color-melancholia-950: #0a200c;
}