Deep Lagoon to Aquarius Color Palette

About this palette

Deep Lagoon to Aquarius is a 5-color cool palette: #005A71 (Deep Lagoon), #5F0800 (Spikey Red), #B0603F (Mars), #43D5FF (Neon Blue), #00B0C9 (Aquarius). It mixes blue, brown, turquoise tones and feels cool overall. The strongest text pairing is #5F0800 on #43D5FF with a contrast ratio of 8.02:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Deep Lagoon	rgb(0, 90, 113)	hsl(192, 100%, 22%)
Spikey Red	rgb(95, 8, 0)	hsl(5, 100%, 19%)
Mars	rgb(176, 96, 63)	hsl(18, 47%, 47%)
Neon Blue	rgb(67, 213, 255)	hsl(193, 100%, 63%)
Aquarius	rgb(0, 176, 201)	hsl(187, 100%, 39%)

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.02:1 Very good#5F0800 on #43D5FF
Aa8.02:1 Very good#43D5FF on #5F0800
Aa5.29:1 Good#5F0800 on #00B0C9
Aa5.29:1 Good#00B0C9 on #5F0800
Aa4.52:1 Good#005A71 on #43D5FF
Aa4.52:1 Good#43D5FF on #005A71
Aa3.02:1 Poor#5F0800 on #B0603F
Aa3.02:1 Poor#B0603F on #5F0800

Color blindness preview

CSS variables

/* Deep Lagoon to Aquarius — https://swatchly.xyz/palette/005a71-5f0800-b0603f-43d5ff-00b0c9 */
:root {
  --deep-lagoon: #005a71;
  --spikey-red: #5f0800;
  --mars: #b0603f;
  --neon-blue: #43d5ff;
  --aquarius: #00b0c9;
}

Tailwind CSS v4

/* Deep Lagoon to Aquarius — https://swatchly.xyz/palette/005a71-5f0800-b0603f-43d5ff-00b0c9 */
@theme {
  --color-deep-lagoon: #005a71;
  --color-deep-lagoon-50: #e8f8ff;
  --color-deep-lagoon-100: #cff2ff;
  --color-deep-lagoon-200: #ace0f4;
  --color-deep-lagoon-300: #8dcae0;
  --color-deep-lagoon-400: #65aac2;
  --color-deep-lagoon-500: #468ea6;
  --color-deep-lagoon-600: #2a7289;
  --color-deep-lagoon-700: #005a71;
  --color-deep-lagoon-800: #044658;
  --color-deep-lagoon-900: #003645;
  --color-deep-lagoon-950: #00222c;
  --color-spikey-red: #5f0800;
  --color-spikey-red-50: #fff2ef;
  --color-spikey-red-100: #ffe4df;
  --color-spikey-red-200: #ffc9be;
  --color-spikey-red-300: #fca898;
  --color-spikey-red-400: #df8574;
  --color-spikey-red-500: #c26757;
  --color-spikey-red-600: #a34d3e;
  --color-spikey-red-700: #86382b;
  --color-spikey-red-800: #6b281d;
  --color-spikey-red-900: #5f0800;
  --color-spikey-red-950: #370e08;
  --color-mars: #b0603f;
  --color-mars-50: #ffefe8;
  --color-mars-100: #ffded1;
  --color-mars-200: #ffbfa6;
  --color-mars-300: #efa283;
  --color-mars-400: #d07e5d;
  --color-mars-500: #b0603f;
  --color-mars-600: #93492a;
  --color-mars-700: #79371a;
  --color-mars-800: #63290f;
  --color-mars-900: #4f1e07;
  --color-mars-950: #351103;
  --color-neon-blue: #43d5ff;
  --color-neon-blue-50: #e9f9ff;
  --color-neon-blue-100: #d1f3ff;
  --color-neon-blue-200: #9be5ff;
  --color-neon-blue-300: #43d5ff;
  --color-neon-blue-400: #1ab4db;
  --color-neon-blue-500: #0096b8;
  --color-neon-blue-600: #007895;
  --color-neon-blue-700: #005f76;
  --color-neon-blue-800: #004a5d;
  --color-neon-blue-900: #003948;
  --color-neon-blue-950: #00242e;
  --color-aquarius: #00b0c9;
  --color-aquarius-50: #dff9ff;
  --color-aquarius-100: #bef3ff;
  --color-aquarius-200: #88e5f8;
  --color-aquarius-300: #5fcfe5;
  --color-aquarius-400: #00b0c9;
  --color-aquarius-500: #0093a8;
  --color-aquarius-600: #007688;
  --color-aquarius-700: #005e6c;
  --color-aquarius-800: #004a55;
  --color-aquarius-900: #003943;
  --color-aquarius-950: #00242b;
}