Lost in Space to Narwhal Grey Color Palette

About this palette

Lost in Space to Narwhal Grey is a 5-color dark, cool palette: #183865 (Lost in Space), #1C2239 (Eclipse Elixir), #00706F (Pine Scented Lagoon), #154E76 (Sea Paint), #08081D (Narwhal Grey). It mixes blue, turquoise, black tones and feels cool overall. The strongest text pairing is #00706F on #08081D with a contrast ratio of 3.34:1, and 0 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Lost in Space	rgb(24, 56, 101)	hsl(215, 62%, 25%)
Eclipse Elixir	rgb(28, 34, 57)	hsl(228, 34%, 17%)
Pine Scented Lagoon	rgb(0, 112, 111)	hsl(179, 100%, 22%)
Sea Paint	rgb(21, 78, 118)	hsl(205, 70%, 27%)
Narwhal Grey	rgb(8, 8, 29)	hsl(240, 57%, 7%)

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.

Aa3.34:1 Poor#00706F on #08081D
Aa3.34:1 Poor#08081D on #00706F

Color blindness preview

CSS variables

/* Lost in Space to Narwhal Grey — https://swatchly.xyz/palette/183865-1c2239-00706f-154e76-08081d */
:root {
  --lost-in-space: #183865;
  --eclipse-elixir: #1c2239;
  --pine-scented-lagoon: #00706f;
  --sea-paint: #154e76;
  --narwhal-grey: #08081d;
}

Tailwind CSS v4

/* Lost in Space to Narwhal Grey — https://swatchly.xyz/palette/183865-1c2239-00706f-154e76-08081d */
@theme {
  --color-lost-in-space: #183865;
  --color-lost-in-space-50: #eff6ff;
  --color-lost-in-space-100: #dfecff;
  --color-lost-in-space-200: #bfdaff;
  --color-lost-in-space-300: #a3c3f2;
  --color-lost-in-space-400: #81a5d7;
  --color-lost-in-space-500: #668abd;
  --color-lost-in-space-600: #4e70a1;
  --color-lost-in-space-700: #3b5a87;
  --color-lost-in-space-800: #2c4870;
  --color-lost-in-space-900: #183865;
  --color-lost-in-space-950: #12243d;
  --color-eclipse-elixir: #1c2239;
  --color-eclipse-elixir-50: #f2f5ff;
  --color-eclipse-elixir-100: #e4ebfe;
  --color-eclipse-elixir-200: #d0d7ee;
  --color-eclipse-elixir-300: #b8c0da;
  --color-eclipse-elixir-400: #98a0bd;
  --color-eclipse-elixir-500: #7d86a2;
  --color-eclipse-elixir-600: #646c88;
  --color-eclipse-elixir-700: #4f576f;
  --color-eclipse-elixir-800: #3e455a;
  --color-eclipse-elixir-900: #303649;
  --color-eclipse-elixir-950: #1c2239;
  --color-pine-scented-lagoon: #00706f;
  --color-pine-scented-lagoon-50: #d5fffd;
  --color-pine-scented-lagoon-100: #c1f5f3;
  --color-pine-scented-lagoon-200: #a2e1e0;
  --color-pine-scented-lagoon-300: #80cbc9;
  --color-pine-scented-lagoon-400: #55aaa8;
  --color-pine-scented-lagoon-500: #328d8b;
  --color-pine-scented-lagoon-600: #00706f;
  --color-pine-scented-lagoon-700: #005958;
  --color-pine-scented-lagoon-800: #004645;
  --color-pine-scented-lagoon-900: #003636;
  --color-pine-scented-lagoon-950: #002222;
  --color-sea-paint: #154e76;
  --color-sea-paint-50: #edf7ff;
  --color-sea-paint-100: #daeeff;
  --color-sea-paint-200: #b5ddff;
  --color-sea-paint-300: #99c8f0;
  --color-sea-paint-400: #76abd6;
  --color-sea-paint-500: #5a90bc;
  --color-sea-paint-600: #4177a1;
  --color-sea-paint-700: #2e6087;
  --color-sea-paint-800: #154e76;
  --color-sea-paint-900: #133c5a;
  --color-sea-paint-950: #08263c;
  --color-narwhal-grey: #08081d;
  --color-narwhal-grey-50: #f3f4ff;
  --color-narwhal-grey-100: #e7eafe;
  --color-narwhal-grey-200: #d3d6ed;
  --color-narwhal-grey-300: #bbbfda;
  --color-narwhal-grey-400: #9c9fbc;
  --color-narwhal-grey-500: #7c7f9c;
  --color-narwhal-grey-600: #5e617c;
  --color-narwhal-grey-700: #44475e;
  --color-narwhal-grey-800: #2f3143;
  --color-narwhal-grey-900: #1e1f2d;
  --color-narwhal-grey-950: #08081d;
}