Nocturnal Expedition to Calm Waters color palette

004B5DNocturnal Expedition 007B9APacific Pleasure 00B7D3Aquarius 44D2FCThor’s Thunder DFF9FFCalm Waters

Open in generator Export PNG, PDF, ASE…

About this palette

Nocturnal Expedition to Calm Waters is a 5-color cool, monochromatic, gradient palette: #004B5D (Nocturnal Expedition), #007B9A (Pacific Pleasure), #00B7D3 (Aquarius), #44D2FC (Thor’s Thunder), #DFF9FF (Calm Waters). It mixes blue, turquoise, white tones and feels cool overall. The strongest text pairing is #004B5D on #DFF9FF with a contrast ratio of 8.84:1, and 2 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Nocturnal Expedition	rgb(0, 75, 93)	hsl(192, 100%, 18%)
Pacific Pleasure	rgb(0, 123, 154)	hsl(192, 100%, 30%)
Aquarius	rgb(0, 183, 211)	hsl(188, 100%, 41%)
Thor’s Thunder	rgb(68, 210, 252)	hsl(194, 97%, 63%)
Calm Waters	rgb(223, 249, 255)	hsl(191, 100%, 94%)

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.84:1 Very good#004B5D on #DFF9FF
Aa8.84:1 Very good#DFF9FF on #004B5D
Aa5.48:1 Good#004B5D on #44D2FC
Aa5.48:1 Good#44D2FC on #004B5D
Aa4.45:1 Poor#007B9A on #DFF9FF
Aa4.45:1 Poor#DFF9FF on #007B9A
Aa4.03:1 Poor#004B5D on #00B7D3
Aa4.03:1 Poor#00B7D3 on #004B5D

Color blindness preview

CSS variables

/* Nocturnal Expedition to Calm Waters — https://swatchly.xyz/palette/004b5d-007b9a-00b7d3-44d2fc-dff9ff */
:root {
  --nocturnal-expedition: #004b5d;
  --pacific-pleasure: #007b9a;
  --aquarius: #00b7d3;
  --thor-s-thunder: #44d2fc;
  --calm-waters: #dff9ff;
}

Tailwind CSS v4

/* Nocturnal Expedition to Calm Waters — https://swatchly.xyz/palette/004b5d-007b9a-00b7d3-44d2fc-dff9ff */
@theme {
  --color-nocturnal-expedition: #004b5d;
  --color-nocturnal-expedition-50: #e7f9ff;
  --color-nocturnal-expedition-100: #cef2ff;
  --color-nocturnal-expedition-200: #b3e0f0;
  --color-nocturnal-expedition-300: #96cbdc;
  --color-nocturnal-expedition-400: #71acbf;
  --color-nocturnal-expedition-500: #5390a4;
  --color-nocturnal-expedition-600: #397588;
  --color-nocturnal-expedition-700: #255e6f;
  --color-nocturnal-expedition-800: #004b5d;
  --color-nocturnal-expedition-900: #0c3946;
  --color-nocturnal-expedition-950: #04242d;
  --color-pacific-pleasure: #007b9a;
  --color-pacific-pleasure-50: #e8f8ff;
  --color-pacific-pleasure-100: #d1f2ff;
  --color-pacific-pleasure-200: #a2e4fd;
  --color-pacific-pleasure-300: #82cfec;
  --color-pacific-pleasure-400: #57b1d0;
  --color-pacific-pleasure-500: #3396b6;
  --color-pacific-pleasure-600: #007b9a;
  --color-pacific-pleasure-700: #00627b;
  --color-pacific-pleasure-800: #004c61;
  --color-pacific-pleasure-900: #003b4b;
  --color-pacific-pleasure-950: #002530;
  --color-aquarius: #00b7d3;
  --color-aquarius-50: #e6faff;
  --color-aquarius-100: #cbf5ff;
  --color-aquarius-200: #8de9fe;
  --color-aquarius-300: #65d5ec;
  --color-aquarius-400: #00b7d3;
  --color-aquarius-500: #0098b0;
  --color-aquarius-600: #007b8e;
  --color-aquarius-700: #006171;
  --color-aquarius-800: #004c59;
  --color-aquarius-900: #003a45;
  --color-aquarius-950: #00242b;
  --color-thor-s-thunder: #44d2fc;
  --color-thor-s-thunder-50: #e6f8ff;
  --color-thor-s-thunder-100: #cdf1ff;
  --color-thor-s-thunder-200: #96e4ff;
  --color-thor-s-thunder-300: #44d2fc;
  --color-thor-s-thunder-400: #1bb1d9;
  --color-thor-s-thunder-500: #0094b6;
  --color-thor-s-thunder-600: #007794;
  --color-thor-s-thunder-700: #005f76;
  --color-thor-s-thunder-800: #004a5d;
  --color-thor-s-thunder-900: #003948;
  --color-thor-s-thunder-950: #00242e;
  --color-calm-waters: #dff9ff;
  --color-calm-waters-50: #dff9ff;
  --color-calm-waters-100: #ddedf1;
  --color-calm-waters-200: #c8dadf;
  --color-calm-waters-300: #afc5ca;
  --color-calm-waters-400: #8ea6ab;
  --color-calm-waters-500: #738b90;
  --color-calm-waters-600: #5a7075;
  --color-calm-waters-700: #45595e;
  --color-calm-waters-800: #34464a;
  --color-calm-waters-900: #273639;
  --color-calm-waters-950: #162124;
}