Nocturnal Expedition to Over the Sky Color Palette

About this palette

Nocturnal Expedition to Over the Sky is a 4-color cool, gradient palette: #004F58 (Nocturnal Expedition), #008685 (Windows 95 Desktop), #76A3F0 (Fennel Flower), #8FD9FC (Over the Sky). It mixes turquoise, blue tones and feels cool overall. The strongest text pairing is #004F58 on #8FD9FC with a contrast ratio of 5.97:1, and 1 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Nocturnal Expedition	rgb(0, 79, 88)	hsl(186, 100%, 17%)
Windows 95 Desktop	rgb(0, 134, 133)	hsl(180, 100%, 26%)
Fennel Flower	rgb(118, 163, 240)	hsl(218, 80%, 70%)
Over the Sky	rgb(143, 217, 252)	hsl(199, 95%, 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.

Aa5.97:1 Good#004F58 on #8FD9FC
Aa5.97:1 Good#8FD9FC on #004F58
Aa3.66:1 Poor#004F58 on #76A3F0
Aa3.66:1 Poor#76A3F0 on #004F58

Color blindness preview

CSS variables

/* Nocturnal Expedition to Over the Sky — https://swatchly.xyz/palette/004f58-008685-76a3f0-8fd9fc */
:root {
  --nocturnal-expedition: #004f58;
  --windows-95-desktop: #008685;
  --fennel-flower: #76a3f0;
  --over-the-sky: #8fd9fc;
}

Tailwind CSS v4

/* Nocturnal Expedition to Over the Sky — https://swatchly.xyz/palette/004f58-008685-76a3f0-8fd9fc */
@theme {
  --color-nocturnal-expedition: #004f58;
  --color-nocturnal-expedition-50: #e1fbff;
  --color-nocturnal-expedition-100: #ccf4fa;
  --color-nocturnal-expedition-200: #b2e1e9;
  --color-nocturnal-expedition-300: #96ccd5;
  --color-nocturnal-expedition-400: #71aeb8;
  --color-nocturnal-expedition-500: #54939d;
  --color-nocturnal-expedition-600: #397982;
  --color-nocturnal-expedition-700: #25626a;
  --color-nocturnal-expedition-800: #004f58;
  --color-nocturnal-expedition-900: #0b3c43;
  --color-nocturnal-expedition-950: #03262b;
  --color-windows-95-desktop: #008685;
  --color-windows-95-desktop-50: #d5fffe;
  --color-windows-95-desktop-100: #c0faf8;
  --color-windows-95-desktop-200: #a4eae8;
  --color-windows-95-desktop-300: #85d7d5;
  --color-windows-95-desktop-400: #5abab8;
  --color-windows-95-desktop-500: #34a09f;
  --color-windows-95-desktop-600: #008685;
  --color-windows-95-desktop-700: #006a6a;
  --color-windows-95-desktop-800: #005353;
  --color-windows-95-desktop-900: #00403f;
  --color-windows-95-desktop-950: #002828;
  --color-fennel-flower: #76a3f0;
  --color-fennel-flower-50: #f1f6ff;
  --color-fennel-flower-100: #e2edff;
  --color-fennel-flower-200: #c4daff;
  --color-fennel-flower-300: #a0c3ff;
  --color-fennel-flower-400: #76a3f0;
  --color-fennel-flower-500: #5b87d1;
  --color-fennel-flower-600: #426bb3;
  --color-fennel-flower-700: #2f5495;
  --color-fennel-flower-800: #204179;
  --color-fennel-flower-900: #163161;
  --color-fennel-flower-950: #0a1e40;
  --color-over-the-sky: #8fd9fc;
  --color-over-the-sky-50: #dbf3ff;
  --color-over-the-sky-100: #c0eaff;
  --color-over-the-sky-200: #8fd9fc;
  --color-over-the-sky-300: #83c3e1;
  --color-over-the-sky-400: #5fa5c6;
  --color-over-the-sky-500: #418bac;
  --color-over-the-sky-600: #277291;
  --color-over-the-sky-700: #125c78;
  --color-over-the-sky-800: #034962;
  --color-over-the-sky-900: #00384d;
  --color-over-the-sky-950: #002331;
}