Start generating

Silent Snowfall to Cerulean color palette

EAF8FFSilent Snowfall004D6BRaging Thunderstorm4F8EB4Underwater Moonlight69CDFFNevermind Nirvana006B92Hydra53B1E8Cerulean
Open in generator Export PNG, PDF, ASE…

About this palette

Silent Snowfall to Cerulean is a 6-color cool, monochromatic palette: #EAF8FF (Silent Snowfall), #004D6B (Raging Thunderstorm), #4F8EB4 (Underwater Moonlight), #69CDFF (Nevermind Nirvana), #006B92 (Hydra), #53B1E8 (Cerulean). It mixes white, blue tones and feels cool overall. The strongest text pairing is #EAF8FF on #004D6B with a contrast ratio of 8.52:1, and 3 of its 15 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Silent Snowfallrgb(234, 248, 255)hsl(200, 100%, 96%)
Raging Thunderstormrgb(0, 77, 107)hsl(197, 100%, 21%)
Underwater Moonlightrgb(79, 142, 180)hsl(203, 40%, 51%)
Nevermind Nirvanargb(105, 205, 255)hsl(200, 100%, 71%)
Hydrargb(0, 107, 146)hsl(196, 100%, 29%)
Ceruleanrgb(83, 177, 232)hsl(202, 76%, 62%)

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.52:1 Very good#EAF8FF on #004D6B
  • Aa8.52:1 Very good#004D6B on #EAF8FF
  • Aa5.51:1 Good#EAF8FF on #006B92
  • Aa5.51:1 Good#006B92 on #EAF8FF
  • Aa5.18:1 Good#004D6B on #69CDFF
  • Aa5.18:1 Good#69CDFF on #004D6B
  • Aa3.88:1 Poor#004D6B on #53B1E8
  • Aa3.88:1 Poor#53B1E8 on #004D6B

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Silent Snowfall to Cerulean — https://swatchly.xyz/palette/eaf8ff-004d6b-4f8eb4-69cdff-006b92-53b1e8 */
:root {
  --silent-snowfall: #eaf8ff;
  --raging-thunderstorm: #004d6b;
  --underwater-moonlight: #4f8eb4;
  --nevermind-nirvana: #69cdff;
  --hydra: #006b92;
  --cerulean: #53b1e8;
}

Tailwind CSS v4

/* Silent Snowfall to Cerulean — https://swatchly.xyz/palette/eaf8ff-004d6b-4f8eb4-69cdff-006b92-53b1e8 */
@theme {
  --color-silent-snowfall: #eaf8ff;
  --color-silent-snowfall-50: #eaf8ff;
  --color-silent-snowfall-100: #e4edf1;
  --color-silent-snowfall-200: #cfd9df;
  --color-silent-snowfall-300: #b8c3c9;
  --color-silent-snowfall-400: #97a4aa;
  --color-silent-snowfall-500: #7c888f;
  --color-silent-snowfall-600: #626e74;
  --color-silent-snowfall-700: #4c575d;
  --color-silent-snowfall-800: #3b4449;
  --color-silent-snowfall-900: #2c3438;
  --color-silent-snowfall-950: #1b2023;
  --color-raging-thunderstorm: #004d6b;
  --color-raging-thunderstorm-50: #eaf7ff;
  --color-raging-thunderstorm-100: #d5f0ff;
  --color-raging-thunderstorm-200: #b0dff9;
  --color-raging-thunderstorm-300: #95cae8;
  --color-raging-thunderstorm-400: #70accc;
  --color-raging-thunderstorm-500: #5291b2;
  --color-raging-thunderstorm-600: #387796;
  --color-raging-thunderstorm-700: #24607d;
  --color-raging-thunderstorm-800: #004d6b;
  --color-raging-thunderstorm-900: #0a3b51;
  --color-raging-thunderstorm-950: #032535;
  --color-underwater-moonlight: #4f8eb4;
  --color-underwater-moonlight-50: #ebf7ff;
  --color-underwater-moonlight-100: #d7efff;
  --color-underwater-moonlight-200: #b0dffd;
  --color-underwater-moonlight-300: #93c9eb;
  --color-underwater-moonlight-400: #6daacf;
  --color-underwater-moonlight-500: #4f8eb4;
  --color-underwater-moonlight-600: #357397;
  --color-underwater-moonlight-700: #205b7c;
  --color-underwater-moonlight-800: #114864;
  --color-underwater-moonlight-900: #07374f;
  --color-underwater-moonlight-950: #022234;
  --color-nevermind-nirvana: #69cdff;
  --color-nevermind-nirvana-50: #e9f7ff;
  --color-nevermind-nirvana-100: #d4efff;
  --color-nevermind-nirvana-200: #a7e0ff;
  --color-nevermind-nirvana-300: #69cdff;
  --color-nevermind-nirvana-400: #4caddb;
  --color-nevermind-nirvana-500: #2291c0;
  --color-nevermind-nirvana-600: #00759f;
  --color-nevermind-nirvana-700: #005d7f;
  --color-nevermind-nirvana-800: #004965;
  --color-nevermind-nirvana-900: #00384f;
  --color-nevermind-nirvana-950: #002333;
  --color-hydra: #006b92;
  --color-hydra-50: #eaf7ff;
  --color-hydra-100: #d1eeff;
  --color-hydra-200: #a0ddff;
  --color-hydra-300: #7fc6ec;
  --color-hydra-400: #54a5ce;
  --color-hydra-500: #3188b0;
  --color-hydra-600: #006b92;
  --color-hydra-700: #005575;
  --color-hydra-800: #00425c;
  --color-hydra-900: #003348;
  --color-hydra-950: #00202f;
  --color-cerulean: #53b1e8;
  --color-cerulean-50: #eff9ff;
  --color-cerulean-100: #ddf1ff;
  --color-cerulean-200: #b6e2ff;
  --color-cerulean-300: #84cffe;
  --color-cerulean-400: #53b1e8;
  --color-cerulean-500: #3294c9;
  --color-cerulean-600: #0277aa;
  --color-cerulean-700: #005e88;
  --color-cerulean-800: #00496b;
  --color-cerulean-900: #003853;
  --color-cerulean-950: #002235;
}

Similar palettes