Snow White to Naval Blue Color Palette

About this palette

Snow White to Naval Blue is a 5-color cool palette: #E3FFE7 (Snow White), #9CBCF4 (Pastel Blue), #D08D86 (Muted Clay), #437A55 (Amazon), #404C69 (Naval Blue). It mixes white, blue, red, green tones and feels cool overall. The strongest text pairing is #E3FFE7 on #404C69 with a contrast ratio of 8.03:1, and 2 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Snow White	rgb(227, 255, 231)	hsl(129, 100%, 95%)
Pastel Blue	rgb(156, 188, 244)	hsl(218, 80%, 78%)
Muted Clay	rgb(208, 141, 134)	hsl(6, 44%, 67%)
Amazon	rgb(67, 122, 85)	hsl(140, 29%, 37%)
Naval Blue	rgb(64, 76, 105)	hsl(222, 24%, 33%)

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.03:1 Very good#E3FFE7 on #404C69
Aa8.03:1 Very good#404C69 on #E3FFE7
Aa4.75:1 Good#E3FFE7 on #437A55
Aa4.75:1 Good#437A55 on #E3FFE7
Aa4.44:1 Poor#9CBCF4 on #404C69
Aa4.44:1 Poor#404C69 on #9CBCF4
Aa3.19:1 Poor#D08D86 on #404C69
Aa3.19:1 Poor#404C69 on #D08D86

Color blindness preview

CSS variables

/* Snow White to Naval Blue — https://swatchly.xyz/palette/e3ffe7-9cbcf4-d08d86-437a55-404c69 */
:root {
  --snow-white: #e3ffe7;
  --pastel-blue: #9cbcf4;
  --muted-clay: #d08d86;
  --amazon: #437a55;
  --naval-blue: #404c69;
}

Tailwind CSS v4

/* Snow White to Naval Blue — https://swatchly.xyz/palette/e3ffe7-9cbcf4-d08d86-437a55-404c69 */
@theme {
  --color-snow-white: #e3ffe7;
  --color-snow-white-50: #e3ffe7;
  --color-snow-white-100: #e1f1e3;
  --color-snow-white-200: #cadecd;
  --color-snow-white-300: #b2c9b5;
  --color-snow-white-400: #90a994;
  --color-snow-white-500: #758e79;
  --color-snow-white-600: #5b735f;
  --color-snow-white-700: #465c49;
  --color-snow-white-800: #354838;
  --color-snow-white-900: #27382a;
  --color-snow-white-950: #172319;
  --color-pastel-blue: #9cbcf4;
  --color-pastel-blue-50: #ebf3ff;
  --color-pastel-blue-100: #dbe8ff;
  --color-pastel-blue-200: #bbd4ff;
  --color-pastel-blue-300: #9cbcf4;
  --color-pastel-blue-400: #7f9dd2;
  --color-pastel-blue-500: #6583b7;
  --color-pastel-blue-600: #4d699b;
  --color-pastel-blue-700: #3a5380;
  --color-pastel-blue-800: #2b4168;
  --color-pastel-blue-900: #203254;
  --color-pastel-blue-950: #111f37;
  --color-muted-clay: #d08d86;
  --color-muted-clay-50: #fff1f0;
  --color-muted-clay-100: #ffe4e0;
  --color-muted-clay-200: #fec8c2;
  --color-muted-clay-300: #ebafa9;
  --color-muted-clay-400: #d08d86;
  --color-muted-clay-500: #b2726c;
  --color-muted-clay-600: #955852;
  --color-muted-clay-700: #7a433e;
  --color-muted-clay-800: #62322e;
  --color-muted-clay-900: #4e2522;
  --color-muted-clay-950: #321513;
  --color-amazon: #437a55;
  --color-amazon-50: #dfffe7;
  --color-amazon-100: #d2f6db;
  --color-amazon-200: #bae4c5;
  --color-amazon-300: #9ecfac;
  --color-amazon-400: #7bb18a;
  --color-amazon-500: #5e956f;
  --color-amazon-600: #437a55;
  --color-amazon-700: #306241;
  --color-amazon-800: #214d30;
  --color-amazon-900: #163c24;
  --color-amazon-950: #0a2614;
  --color-naval-blue: #404c69;
  --color-naval-blue-50: #f1f5ff;
  --color-naval-blue-100: #e2ebff;
  --color-naval-blue-200: #cad6f0;
  --color-naval-blue-300: #b1bddb;
  --color-naval-blue-400: #8f9cbc;
  --color-naval-blue-500: #72809f;
  --color-naval-blue-600: #576481;
  --color-naval-blue-700: #404c69;
  --color-naval-blue-800: #323b51;
  --color-naval-blue-900: #252d40;
  --color-naval-blue-950: #161b28;
}