Silent Snowfall to Nevermind Nirvana color palette

ECF7FFSilent Snowfall 006492Wavy Navy 003C5CPoseidon 0094EBOut of the Blue 7FC8FFNevermind Nirvana

About this palette

Silent Snowfall to Nevermind Nirvana is a 5-color cool, monochromatic palette: #ECF7FF (Silent Snowfall), #006492 (Wavy Navy), #003C5C (Poseidon), #0094EB (Out of the Blue), #7FC8FF (Nevermind Nirvana). It mixes white, blue tones and feels cool overall. The strongest text pairing is #ECF7FF on #003C5C with a contrast ratio of 10.73:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Silent Snowfall	rgb(236, 247, 255)	hsl(205, 100%, 96%)
Wavy Navy	rgb(0, 100, 146)	hsl(199, 100%, 29%)
Poseidon	rgb(0, 60, 92)	hsl(201, 100%, 18%)
Out of the Blue	rgb(0, 148, 235)	hsl(202, 100%, 46%)
Nevermind Nirvana	rgb(127, 200, 255)	hsl(206, 100%, 75%)

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.

Aa10.73:1 Very good#ECF7FF on #003C5C
Aa10.73:1 Very good#003C5C on #ECF7FF
Aa6.45:1 Good#003C5C on #7FC8FF
Aa6.45:1 Good#7FC8FF on #003C5C
Aa5.97:1 Good#ECF7FF on #006492
Aa5.97:1 Good#006492 on #ECF7FF
Aa3.59:1 Poor#006492 on #7FC8FF
Aa3.59:1 Poor#7FC8FF on #006492

Color blindness preview

CSS variables

/* Silent Snowfall to Nevermind Nirvana — https://swatchly.xyz/palette/ecf7ff-006492-003c5c-0094eb-7fc8ff */
:root {
  --silent-snowfall: #ecf7ff;
  --wavy-navy: #006492;
  --poseidon: #003c5c;
  --out-of-the-blue: #0094eb;
  --nevermind-nirvana: #7fc8ff;
}

Tailwind CSS v4

/* Silent Snowfall to Nevermind Nirvana — https://swatchly.xyz/palette/ecf7ff-006492-003c5c-0094eb-7fc8ff */
@theme {
  --color-silent-snowfall: #ecf7ff;
  --color-silent-snowfall-50: #ecf7ff;
  --color-silent-snowfall-100: #e6ecf1;
  --color-silent-snowfall-200: #d1d9df;
  --color-silent-snowfall-300: #b9c2c9;
  --color-silent-snowfall-400: #99a3aa;
  --color-silent-snowfall-500: #7e888f;
  --color-silent-snowfall-600: #646d74;
  --color-silent-snowfall-700: #4e575d;
  --color-silent-snowfall-800: #3c4349;
  --color-silent-snowfall-900: #2e3438;
  --color-silent-snowfall-950: #1b2023;
  --color-wavy-navy: #006492;
  --color-wavy-navy-50: #ecf7ff;
  --color-wavy-navy-100: #d8efff;
  --color-wavy-navy-200: #b3e0ff;
  --color-wavy-navy-300: #8ccdf8;
  --color-wavy-navy-400: #65afde;
  --color-wavy-navy-500: #4594c5;
  --color-wavy-navy-600: #287aa9;
  --color-wavy-navy-700: #006492;
  --color-wavy-navy-800: #004e73;
  --color-wavy-navy-900: #003c5a;
  --color-wavy-navy-950: #00263b;
  --color-poseidon: #003c5c;
  --color-poseidon-50: #ecf7ff;
  --color-poseidon-100: #d9efff;
  --color-poseidon-200: #b6ddfb;
  --color-poseidon-300: #9ac7e8;
  --color-poseidon-400: #77a9cd;
  --color-poseidon-500: #5b8fb3;
  --color-poseidon-600: #427497;
  --color-poseidon-700: #2f5e7e;
  --color-poseidon-800: #204b67;
  --color-poseidon-900: #003c5c;
  --color-poseidon-950: #092638;
  --color-out-of-the-blue: #0094eb;
  --color-out-of-the-blue-50: #f0f8ff;
  --color-out-of-the-blue-100: #e0f0ff;
  --color-out-of-the-blue-200: #bee0ff;
  --color-out-of-the-blue-300: #94cdff;
  --color-out-of-the-blue-400: #4bb0ff;
  --color-out-of-the-blue-500: #0094eb;
  --color-out-of-the-blue-600: #0077be;
  --color-out-of-the-blue-700: #005e98;
  --color-out-of-the-blue-800: #004978;
  --color-out-of-the-blue-900: #00385d;
  --color-out-of-the-blue-950: #00223c;
  --color-nevermind-nirvana: #7fc8ff;
  --color-nevermind-nirvana-50: #ebf6ff;
  --color-nevermind-nirvana-100: #d8eeff;
  --color-nevermind-nirvana-200: #b1dcff;
  --color-nevermind-nirvana-300: #7fc8ff;
  --color-nevermind-nirvana-400: #63a8db;
  --color-nevermind-nirvana-500: #448cc0;
  --color-nevermind-nirvana-600: #2871a3;
  --color-nevermind-nirvana-700: #115a87;
  --color-nevermind-nirvana-800: #01466d;
  --color-nevermind-nirvana-900: #003656;
  --color-nevermind-nirvana-950: #002238;
}