Naval Blue to Icy Plains Color Palette

About this palette

Naval Blue to Icy Plains is a 5-color cool palette: #464B6C (Naval Blue), #9C4D47 (Lumberjack), #75A27D (Primavera), #A4D2A2 (Limestoned), #CDD9FF (Icy Plains). It mixes purple, red, green, blue tones and feels cool overall. The strongest text pairing is #464B6C on #CDD9FF with a contrast ratio of 6.03:1, and 2 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Naval Blue	rgb(70, 75, 108)	hsl(232, 21%, 35%)
Lumberjack	rgb(156, 77, 71)	hsl(4, 37%, 45%)
Primavera	rgb(117, 162, 125)	hsl(131, 19%, 55%)
Limestoned	rgb(164, 210, 162)	hsl(117, 35%, 73%)
Icy Plains	rgb(205, 217, 255)	hsl(226, 100%, 90%)

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.

Aa6.03:1 Good#464B6C on #CDD9FF
Aa6.03:1 Good#CDD9FF on #464B6C
Aa4.96:1 Good#464B6C on #A4D2A2
Aa4.96:1 Good#A4D2A2 on #464B6C
Aa4.20:1 Poor#9C4D47 on #CDD9FF
Aa4.20:1 Poor#CDD9FF on #9C4D47
Aa3.45:1 Poor#9C4D47 on #A4D2A2
Aa3.45:1 Poor#A4D2A2 on #9C4D47

Color blindness preview

CSS variables

/* Naval Blue to Icy Plains — https://swatchly.xyz/palette/464b6c-9c4d47-75a27d-a4d2a2-cdd9ff */
:root {
  --naval-blue: #464b6c;
  --lumberjack: #9c4d47;
  --primavera: #75a27d;
  --limestoned: #a4d2a2;
  --icy-plains: #cdd9ff;
}

Tailwind CSS v4

/* Naval Blue to Icy Plains — https://swatchly.xyz/palette/464b6c-9c4d47-75a27d-a4d2a2-cdd9ff */
@theme {
  --color-naval-blue: #464b6c;
  --color-naval-blue-50: #f2f4ff;
  --color-naval-blue-100: #e6eaff;
  --color-naval-blue-200: #cfd4f2;
  --color-naval-blue-300: #b6bcdd;
  --color-naval-blue-400: #949bbf;
  --color-naval-blue-500: #787ea2;
  --color-naval-blue-600: #5d6384;
  --color-naval-blue-700: #464b6c;
  --color-naval-blue-800: #363a54;
  --color-naval-blue-900: #292c42;
  --color-naval-blue-950: #181b2a;
  --color-lumberjack: #9c4d47;
  --color-lumberjack-50: #fff2f0;
  --color-lumberjack-100: #ffe3e0;
  --color-lumberjack-200: #ffc6c0;
  --color-lumberjack-300: #f5a8a0;
  --color-lumberjack-400: #d7857d;
  --color-lumberjack-500: #ba6861;
  --color-lumberjack-600: #9c4d47;
  --color-lumberjack-700: #7f3a35;
  --color-lumberjack-800: #672a27;
  --color-lumberjack-900: #521f1c;
  --color-lumberjack-950: #35110f;
  --color-primavera: #75a27d;
  --color-primavera-50: #def9e2;
  --color-primavera-100: #cfeed4;
  --color-primavera-200: #b5dabb;
  --color-primavera-300: #99c2a0;
  --color-primavera-400: #75a27d;
  --color-primavera-500: #5c8965;
  --color-primavera-600: #46704e;
  --color-primavera-700: #345a3c;
  --color-primavera-800: #26482d;
  --color-primavera-900: #1c3922;
  --color-primavera-950: #102514;
  --color-limestoned: #a4d2a2;
  --color-limestoned-50: #e6ffe4;
  --color-limestoned-100: #daf6d8;
  --color-limestoned-200: #c3e5c1;
  --color-limestoned-300: #a4d2a2;
  --color-limestoned-400: #86b184;
  --color-limestoned-500: #699568;
  --color-limestoned-600: #4f794e;
  --color-limestoned-700: #3b613a;
  --color-limestoned-800: #2b4c2a;
  --color-limestoned-900: #1e3b1e;
  --color-limestoned-950: #102510;
  --color-icy-plains: #cdd9ff;
  --color-icy-plains-50: #f4f7ff;
  --color-icy-plains-100: #e7edff;
  --color-icy-plains-200: #cdd9ff;
  --color-icy-plains-300: #b8c2e2;
  --color-icy-plains-400: #97a2c4;
  --color-icy-plains-500: #7b86a9;
  --color-icy-plains-600: #616b8c;
  --color-icy-plains-700: #4b5472;
  --color-icy-plains-800: #39415b;
  --color-icy-plains-900: #2b3247;
  --color-icy-plains-950: #1a1e2e;
}