Silent Snowfall to Blue Whale color palette

EAF4FFSilent Snowfall B1B2CAEthereal Mist 7893AACelestial Horizon 6C6C81Dark Prince 2E4951Mallard 17333EBlue Whale

Open in generator Export PNG, PDF, ASE…

About this palette

Silent Snowfall to Blue Whale is a 6-color muted, gradient palette: #EAF4FF (Silent Snowfall), #B1B2CA (Ethereal Mist), #7893AA (Celestial Horizon), #6C6C81 (Dark Prince), #2E4951 (Mallard), #17333E (Blue Whale). It mixes white, gray, blue tones and feels cool overall. The strongest text pairing is #EAF4FF on #17333E with a contrast ratio of 11.95:1, and 5 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Silent Snowfall	rgb(234, 244, 255)	hsl(211, 100%, 96%)
Ethereal Mist	rgb(177, 178, 202)	hsl(238, 19%, 74%)
Celestial Horizon	rgb(120, 147, 170)	hsl(208, 23%, 57%)
Dark Prince	rgb(108, 108, 129)	hsl(240, 9%, 46%)
Mallard	rgb(46, 73, 81)	hsl(194, 28%, 25%)
Blue Whale	rgb(23, 51, 62)	hsl(197, 46%, 17%)

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.

Aa11.95:1 Very good#EAF4FF on #17333E
Aa11.95:1 Very good#17333E on #EAF4FF
Aa8.63:1 Very good#EAF4FF on #2E4951
Aa8.63:1 Very good#2E4951 on #EAF4FF
Aa6.39:1 Good#B1B2CA on #17333E
Aa6.39:1 Good#17333E on #B1B2CA
Aa4.61:1 Good#B1B2CA on #2E4951
Aa4.61:1 Good#2E4951 on #B1B2CA

Color blindness preview

CSS variables

/* Silent Snowfall to Blue Whale — https://swatchly.xyz/palette/eaf4ff-b1b2ca-7893aa-6c6c81-2e4951-17333e */
:root {
  --silent-snowfall: #eaf4ff;
  --ethereal-mist: #b1b2ca;
  --celestial-horizon: #7893aa;
  --dark-prince: #6c6c81;
  --mallard: #2e4951;
  --blue-whale: #17333e;
}

Tailwind CSS v4

/* Silent Snowfall to Blue Whale — https://swatchly.xyz/palette/eaf4ff-b1b2ca-7893aa-6c6c81-2e4951-17333e */
@theme {
  --color-silent-snowfall: #eaf4ff;
  --color-silent-snowfall-50: #eaf4ff;
  --color-silent-snowfall-100: #e4eaf1;
  --color-silent-snowfall-200: #cfd7df;
  --color-silent-snowfall-300: #b9c1ca;
  --color-silent-snowfall-400: #99a2ac;
  --color-silent-snowfall-500: #7e8791;
  --color-silent-snowfall-600: #646d76;
  --color-silent-snowfall-700: #4e565f;
  --color-silent-snowfall-800: #3c434a;
  --color-silent-snowfall-900: #2e333a;
  --color-silent-snowfall-950: #1c2024;
  --color-ethereal-mist: #b1b2ca;
  --color-ethereal-mist-50: #ecedfc;
  --color-ethereal-mist-100: #e0e1f2;
  --color-ethereal-mist-200: #cacbdf;
  --color-ethereal-mist-300: #b1b2ca;
  --color-ethereal-mist-400: #9495ac;
  --color-ethereal-mist-500: #7b7c92;
  --color-ethereal-mist-600: #636479;
  --color-ethereal-mist-700: #4f5063;
  --color-ethereal-mist-800: #3e3f4f;
  --color-ethereal-mist-900: #313140;
  --color-ethereal-mist-950: #1e1e28;
  --color-celestial-horizon: #7893aa;
  --color-celestial-horizon-50: #f0f8ff;
  --color-celestial-horizon-100: #e1f1ff;
  --color-celestial-horizon-200: #cbdff1;
  --color-celestial-horizon-300: #b3cbdf;
  --color-celestial-horizon-400: #93adc3;
  --color-celestial-horizon-500: #7893aa;
  --color-celestial-horizon-600: #5d778d;
  --color-celestial-horizon-700: #465e72;
  --color-celestial-horizon-800: #34495b;
  --color-celestial-horizon-900: #263846;
  --color-celestial-horizon-950: #15222c;
  --color-dark-prince: #6c6c81;
  --color-dark-prince-50: #f4f4ff;
  --color-dark-prince-100: #eaeaf9;
  --color-dark-prince-200: #d6d7e8;
  --color-dark-prince-300: #c0c0d4;
  --color-dark-prince-400: #a1a1b7;
  --color-dark-prince-500: #86869c;
  --color-dark-prince-600: #6c6c81;
  --color-dark-prince-700: #555568;
  --color-dark-prince-800: #424252;
  --color-dark-prince-900: #323240;
  --color-dark-prince-950: #1f1f29;
  --color-mallard: #2e4951;
  --color-mallard-50: #e8f9fe;
  --color-mallard-100: #dceff5;
  --color-mallard-200: #c5dce3;
  --color-mallard-300: #adc6ce;
  --color-mallard-400: #8ba8b1;
  --color-mallard-500: #708d96;
  --color-mallard-600: #57727b;
  --color-mallard-700: #425c63;
  --color-mallard-800: #2e4951;
  --color-mallard-900: #25383e;
  --color-mallard-950: #152327;
  --color-blue-whale: #17333e;
  --color-blue-whale-50: #e9f8ff;
  --color-blue-whale-100: #dbeff8;
  --color-blue-whale-200: #c4dce6;
  --color-blue-whale-300: #abc6d2;
  --color-blue-whale-400: #88a6b3;
  --color-blue-whale-500: #6c8a97;
  --color-blue-whale-600: #526f7b;
  --color-blue-whale-700: #3d5762;
  --color-blue-whale-800: #2c434c;
  --color-blue-whale-900: #17333e;
  --color-blue-whale-950: #111e24;
}