Depths of the Nile to Metal Gear color palette

2B3B4EDepths of the Nile 3E5F68Under the Sea 8A85A0Dusty Chimney 72A9BDSerene Sea A5C3E3Metal Gear

About this palette

Depths of the Nile to Metal Gear is a 5-color muted, cool, gradient palette: #2B3B4E (Depths of the Nile), #3E5F68 (Under the Sea), #8A85A0 (Dusty Chimney), #72A9BD (Serene Sea), #A5C3E3 (Metal Gear). It mixes blue, purple tones and feels cool overall. The strongest text pairing is #2B3B4E on #A5C3E3 with a contrast ratio of 6.26:1, and 1 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Depths of the Nile	rgb(43, 59, 78)	hsl(213, 29%, 24%)
Under the Sea	rgb(62, 95, 104)	hsl(193, 25%, 33%)
Dusty Chimney	rgb(138, 133, 160)	hsl(251, 12%, 57%)
Serene Sea	rgb(114, 169, 189)	hsl(196, 36%, 59%)
Metal Gear	rgb(165, 195, 227)	hsl(211, 53%, 77%)

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.26:1 Good#2B3B4E on #A5C3E3
Aa6.26:1 Good#A5C3E3 on #2B3B4E
Aa4.42:1 Poor#2B3B4E on #72A9BD
Aa4.42:1 Poor#72A9BD on #2B3B4E
Aa3.79:1 Poor#3E5F68 on #A5C3E3
Aa3.79:1 Poor#A5C3E3 on #3E5F68
Aa3.23:1 Poor#2B3B4E on #8A85A0
Aa3.23:1 Poor#8A85A0 on #2B3B4E

Color blindness preview

CSS variables

/* Depths of the Nile to Metal Gear — https://swatchly.xyz/palette/2b3b4e-3e5f68-8a85a0-72a9bd-a5c3e3 */
:root {
  --depths-of-the-nile: #2b3b4e;
  --under-the-sea: #3e5f68;
  --dusty-chimney: #8a85a0;
  --serene-sea: #72a9bd;
  --metal-gear: #a5c3e3;
}

Tailwind CSS v4

/* Depths of the Nile to Metal Gear — https://swatchly.xyz/palette/2b3b4e-3e5f68-8a85a0-72a9bd-a5c3e3 */
@theme {
  --color-depths-of-the-nile: #2b3b4e;
  --color-depths-of-the-nile-50: #eef6ff;
  --color-depths-of-the-nile-100: #e0edfc;
  --color-depths-of-the-nile-200: #cad9eb;
  --color-depths-of-the-nile-300: #b2c3d7;
  --color-depths-of-the-nile-400: #93a5bb;
  --color-depths-of-the-nile-500: #788ba1;
  --color-depths-of-the-nile-600: #607186;
  --color-depths-of-the-nile-700: #4c5c6f;
  --color-depths-of-the-nile-800: #3b4a5b;
  --color-depths-of-the-nile-900: #2b3b4e;
  --color-depths-of-the-nile-950: #1c2530;
  --color-under-the-sea: #3e5f68;
  --color-under-the-sea-50: #e5f9ff;
  --color-under-the-sea-100: #d9f0f6;
  --color-under-the-sea-200: #c3dee5;
  --color-under-the-sea-300: #aac8d1;
  --color-under-the-sea-400: #89aab4;
  --color-under-the-sea-500: #6d8f99;
  --color-under-the-sea-600: #54757e;
  --color-under-the-sea-700: #3e5f68;
  --color-under-the-sea-800: #2f4a52;
  --color-under-the-sea-900: #223940;
  --color-under-the-sea-950: #132428;
  --color-dusty-chimney: #8a85a0;
  --color-dusty-chimney-50: #f6f4ff;
  --color-dusty-chimney-100: #edeafc;
  --color-dusty-chimney-200: #dad6eb;
  --color-dusty-chimney-300: #c4bfd8;
  --color-dusty-chimney-400: #a5a0bb;
  --color-dusty-chimney-500: #8a85a0;
  --color-dusty-chimney-600: #6f6a84;
  --color-dusty-chimney-700: #58536b;
  --color-dusty-chimney-800: #444055;
  --color-dusty-chimney-900: #343142;
  --color-dusty-chimney-950: #201e2a;
  --color-serene-sea: #72a9bd;
  --color-serene-sea-50: #e6f8ff;
  --color-serene-sea-100: #cef1fe;
  --color-serene-sea-200: #b4deee;
  --color-serene-sea-300: #98c8da;
  --color-serene-sea-400: #72a9bd;
  --color-serene-sea-500: #578ea1;
  --color-serene-sea-600: #3e7385;
  --color-serene-sea-700: #2a5c6c;
  --color-serene-sea-800: #1c4857;
  --color-serene-sea-900: #123844;
  --color-serene-sea-950: #07232c;
  --color-metal-gear: #a5c3e3;
  --color-metal-gear-50: #edf6ff;
  --color-metal-gear-100: #dbecff;
  --color-metal-gear-200: #c2d9f2;
  --color-metal-gear-300: #a5c3e3;
  --color-metal-gear-400: #88a4c1;
  --color-metal-gear-500: #6c88a6;
  --color-metal-gear-600: #536e8a;
  --color-metal-gear-700: #3f5771;
  --color-metal-gear-800: #2f445a;
  --color-metal-gear-900: #223447;
  --color-metal-gear-950: #13202e;
}