Deep Lagoon to Nevermind Nirvana color palette

005973Deep Lagoon EAF2FFCotton Boll 5076B1Sail On 1E1E2EEclipse Elixir 82CBF6Nevermind Nirvana

About this palette

Deep Lagoon to Nevermind Nirvana is a 5-color cool palette: #005973 (Deep Lagoon), #EAF2FF (Cotton Boll), #5076B1 (Sail On), #1E1E2E (Eclipse Elixir), #82CBF6 (Nevermind Nirvana). It mixes blue, white, gray tones and feels cool overall. The strongest text pairing is #EAF2FF on #1E1E2E with a contrast ratio of 14.56:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Deep Lagoon	rgb(0, 89, 115)	hsl(194, 100%, 23%)
Cotton Boll	rgb(234, 242, 255)	hsl(217, 100%, 96%)
Sail On	rgb(80, 118, 177)	hsl(216, 38%, 50%)
Eclipse Elixir	rgb(30, 30, 46)	hsl(240, 21%, 15%)
Nevermind Nirvana	rgb(130, 203, 246)	hsl(202, 87%, 74%)

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.

Aa14.56:1 Super#EAF2FF on #1E1E2E
Aa14.56:1 Super#1E1E2E on #EAF2FF
Aa9.23:1 Very good#1E1E2E on #82CBF6
Aa9.23:1 Very good#82CBF6 on #1E1E2E
Aa6.97:1 Good#005973 on #EAF2FF
Aa6.97:1 Good#EAF2FF on #005973
Aa4.42:1 Poor#005973 on #82CBF6
Aa4.42:1 Poor#82CBF6 on #005973

Color blindness preview

CSS variables

/* Deep Lagoon to Nevermind Nirvana — https://swatchly.xyz/palette/005973-eaf2ff-5076b1-1e1e2e-82cbf6 */
:root {
  --deep-lagoon: #005973;
  --cotton-boll: #eaf2ff;
  --sail-on: #5076b1;
  --eclipse-elixir: #1e1e2e;
  --nevermind-nirvana: #82cbf6;
}

Tailwind CSS v4

/* Deep Lagoon to Nevermind Nirvana — https://swatchly.xyz/palette/005973-eaf2ff-5076b1-1e1e2e-82cbf6 */
@theme {
  --color-deep-lagoon: #005973;
  --color-deep-lagoon-50: #e9f8ff;
  --color-deep-lagoon-100: #d2f1ff;
  --color-deep-lagoon-200: #ace0f6;
  --color-deep-lagoon-300: #8dc9e3;
  --color-deep-lagoon-400: #65a9c5;
  --color-deep-lagoon-500: #468da9;
  --color-deep-lagoon-600: #2a718b;
  --color-deep-lagoon-700: #005973;
  --color-deep-lagoon-800: #05455a;
  --color-deep-lagoon-900: #003547;
  --color-deep-lagoon-950: #00212d;
  --color-cotton-boll: #eaf2ff;
  --color-cotton-boll-50: #eaf2ff;
  --color-cotton-boll-100: #e3e8f1;
  --color-cotton-boll-200: #d0d5df;
  --color-cotton-boll-300: #b9c0ca;
  --color-cotton-boll-400: #9aa1ac;
  --color-cotton-boll-500: #7f8692;
  --color-cotton-boll-600: #656c77;
  --color-cotton-boll-700: #505660;
  --color-cotton-boll-800: #3d434b;
  --color-cotton-boll-900: #2f333a;
  --color-cotton-boll-950: #1c1f25;
  --color-sail-on: #5076b1;
  --color-sail-on-50: #eff6ff;
  --color-sail-on-100: #e3eeff;
  --color-sail-on-200: #c6ddff;
  --color-sail-on-300: #a5c8fe;
  --color-sail-on-400: #84aae5;
  --color-sail-on-500: #6990cc;
  --color-sail-on-600: #5076b1;
  --color-sail-on-700: #3a5d93;
  --color-sail-on-800: #294878;
  --color-sail-on-900: #1d375f;
  --color-sail-on-950: #0f213f;
  --color-eclipse-elixir: #1e1e2e;
  --color-eclipse-elixir-50: #f3f4ff;
  --color-eclipse-elixir-100: #e9eaf8;
  --color-eclipse-elixir-200: #d5d6e6;
  --color-eclipse-elixir-300: #bebfd2;
  --color-eclipse-elixir-400: #9f9fb4;
  --color-eclipse-elixir-500: #848498;
  --color-eclipse-elixir-600: #696a7d;
  --color-eclipse-elixir-700: #535465;
  --color-eclipse-elixir-800: #414150;
  --color-eclipse-elixir-900: #32323f;
  --color-eclipse-elixir-950: #1e1e2e;
  --color-nevermind-nirvana: #82cbf6;
  --color-nevermind-nirvana-50: #ebf7ff;
  --color-nevermind-nirvana-100: #d7efff;
  --color-nevermind-nirvana-200: #acdfff;
  --color-nevermind-nirvana-300: #82cbf6;
  --color-nevermind-nirvana-400: #66abd3;
  --color-nevermind-nirvana-500: #468fb7;
  --color-nevermind-nirvana-600: #2a749a;
  --color-nevermind-nirvana-700: #145c7f;
  --color-nevermind-nirvana-800: #034867;
  --color-nevermind-nirvana-900: #003751;
  --color-nevermind-nirvana-950: #002334;
}