Start generating

Nocturnal Expedition to Pale Sky color palette

004854Nocturnal Expedition8D423CChocolate Explosion0095A7OasisFF6F6BFlirty SalmonFFC7BFPeach FuzzC2F5FFPale Sky
Open in generator Export PNG, PDF, ASE…

About this palette

Nocturnal Expedition to Pale Sky is a 6-color vintage palette: #004854 (Nocturnal Expedition), #8D423C (Chocolate Explosion), #0095A7 (Oasis), #FF6F6B (Flirty Salmon), #FFC7BF (Peach Fuzz), #C2F5FF (Pale Sky). It mixes turquoise, red, pink tones and feels balanced overall. The strongest text pairing is #004854 on #C2F5FF with a contrast ratio of 8.66:1, and 4 of its 15 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Nocturnal Expeditionrgb(0, 72, 84)hsl(189, 100%, 16%)
Chocolate Explosionrgb(141, 66, 60)hsl(4, 40%, 39%)
Oasisrgb(0, 149, 167)hsl(186, 100%, 33%)
Flirty Salmonrgb(255, 111, 107)hsl(2, 100%, 71%)
Peach Fuzzrgb(255, 199, 191)hsl(8, 100%, 87%)
Pale Skyrgb(194, 245, 255)hsl(190, 100%, 88%)

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.66:1 Very good#004854 on #C2F5FF
  • Aa8.66:1 Very good#C2F5FF on #004854
  • Aa6.90:1 Good#004854 on #FFC7BF
  • Aa6.90:1 Good#FFC7BF on #004854
  • Aa5.98:1 Good#8D423C on #C2F5FF
  • Aa5.98:1 Good#C2F5FF on #8D423C
  • Aa4.76:1 Good#8D423C on #FFC7BF
  • Aa4.76:1 Good#FFC7BF on #8D423C

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Nocturnal Expedition to Pale Sky — https://swatchly.xyz/palette/004854-8d423c-0095a7-ff6f6b-ffc7bf-c2f5ff */
:root {
  --nocturnal-expedition: #004854;
  --chocolate-explosion: #8d423c;
  --oasis: #0095a7;
  --flirty-salmon: #ff6f6b;
  --peach-fuzz: #ffc7bf;
  --pale-sky: #c2f5ff;
}

Tailwind CSS v4

/* Nocturnal Expedition to Pale Sky — https://swatchly.xyz/palette/004854-8d423c-0095a7-ff6f6b-ffc7bf-c2f5ff */
@theme {
  --color-nocturnal-expedition: #004854;
  --color-nocturnal-expedition-50: #e4faff;
  --color-nocturnal-expedition-100: #cef3fb;
  --color-nocturnal-expedition-200: #b4e0eb;
  --color-nocturnal-expedition-300: #97cad6;
  --color-nocturnal-expedition-400: #72abb8;
  --color-nocturnal-expedition-500: #548f9c;
  --color-nocturnal-expedition-600: #397380;
  --color-nocturnal-expedition-700: #255b67;
  --color-nocturnal-expedition-800: #004854;
  --color-nocturnal-expedition-900: #0d373f;
  --color-nocturnal-expedition-950: #052228;
  --color-chocolate-explosion: #8d423c;
  --color-chocolate-explosion-50: #fff2f0;
  --color-chocolate-explosion-100: #ffe4e1;
  --color-chocolate-explosion-200: #ffcac4;
  --color-chocolate-explosion-300: #f7aea6;
  --color-chocolate-explosion-400: #dc8d85;
  --color-chocolate-explosion-500: #c2716a;
  --color-chocolate-explosion-600: #a55851;
  --color-chocolate-explosion-700: #8d423c;
  --color-chocolate-explosion-800: #70322d;
  --color-chocolate-explosion-900: #592420;
  --color-chocolate-explosion-950: #3b1411;
  --color-oasis: #0095a7;
  --color-oasis-50: #e1faff;
  --color-oasis-100: #c0f5ff;
  --color-oasis-200: #97e5f3;
  --color-oasis-300: #73d0e0;
  --color-oasis-400: #41b1c3;
  --color-oasis-500: #0095a7;
  --color-oasis-600: #007887;
  --color-oasis-700: #005f6b;
  --color-oasis-800: #004b54;
  --color-oasis-900: #003a42;
  --color-oasis-950: #00242a;
  --color-flirty-salmon: #ff6f6b;
  --color-flirty-salmon-50: #fff3f1;
  --color-flirty-salmon-100: #ffe5e3;
  --color-flirty-salmon-200: #ffcac5;
  --color-flirty-salmon-300: #ffa8a2;
  --color-flirty-salmon-400: #ff6f6b;
  --color-flirty-salmon-500: #de5150;
  --color-flirty-salmon-600: #bd3437;
  --color-flirty-salmon-700: #9d1b24;
  --color-flirty-salmon-800: #800816;
  --color-flirty-salmon-900: #66000d;
  --color-flirty-salmon-950: #430005;
  --color-peach-fuzz: #ffc7bf;
  --color-peach-fuzz-50: #fff1ef;
  --color-peach-fuzz-100: #ffe3df;
  --color-peach-fuzz-200: #ffc7bf;
  --color-peach-fuzz-300: #e2b3ac;
  --color-peach-fuzz-400: #c5928b;
  --color-peach-fuzz-500: #aa7770;
  --color-peach-fuzz-600: #8d5d57;
  --color-peach-fuzz-700: #734842;
  --color-peach-fuzz-800: #5c3732;
  --color-peach-fuzz-900: #492925;
  --color-peach-fuzz-950: #2f1815;
  --color-pale-sky: #c2f5ff;
  --color-pale-sky-50: #e1faff;
  --color-pale-sky-100: #c2f5ff;
  --color-pale-sky-200: #badfe6;
  --color-pale-sky-300: #9fc9d1;
  --color-pale-sky-400: #7caab3;
  --color-pale-sky-500: #5f8f98;
  --color-pale-sky-600: #46747d;
  --color-pale-sky-700: #325d65;
  --color-pale-sky-800: #234950;
  --color-pale-sky-900: #17383e;
  --color-pale-sky-950: #0b2327;
}

Similar palettes