Nocturnal Expedition to Pastel Blue Color Palette

About this palette

Nocturnal Expedition to Pastel Blue is a 5-color cool, vintage palette: #004E51 (Nocturnal Expedition), #945514 (Mochaccino), #0095A7 (Oasis), #EC9570 (Kindleflame), #A0C3FF (Pastel Blue). It mixes turquoise, brown, orange, blue tones and feels cool overall. The strongest text pairing is #004E51 on #A0C3FF with a contrast ratio of 5.32:1, and 1 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Nocturnal Expedition	rgb(0, 78, 81)	hsl(182, 100%, 16%)
Mochaccino	rgb(148, 85, 20)	hsl(30, 76%, 33%)
Oasis	rgb(0, 149, 167)	hsl(186, 100%, 33%)
Kindleflame	rgb(236, 149, 112)	hsl(18, 77%, 68%)
Pastel Blue	rgb(160, 195, 255)	hsl(218, 100%, 81%)

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.32:1 Good#004E51 on #A0C3FF
Aa5.32:1 Good#A0C3FF on #004E51
Aa4.12:1 Poor#004E51 on #EC9570
Aa4.12:1 Poor#EC9570 on #004E51
Aa3.29:1 Poor#945514 on #A0C3FF
Aa3.29:1 Poor#A0C3FF on #945514

Color blindness preview

CSS variables

/* Nocturnal Expedition to Pastel Blue — https://swatchly.xyz/palette/004e51-945514-0095a7-ec9570-a0c3ff */
:root {
  --nocturnal-expedition: #004e51;
  --mochaccino: #945514;
  --oasis: #0095a7;
  --kindleflame: #ec9570;
  --pastel-blue: #a0c3ff;
}

Tailwind CSS v4

/* Nocturnal Expedition to Pastel Blue — https://swatchly.xyz/palette/004e51-945514-0095a7-ec9570-a0c3ff */
@theme {
  --color-nocturnal-expedition: #004e51;
  --color-nocturnal-expedition-50: #dafdfe;
  --color-nocturnal-expedition-100: #cdf4f5;
  --color-nocturnal-expedition-200: #b3e2e4;
  --color-nocturnal-expedition-300: #97cdcf;
  --color-nocturnal-expedition-400: #72aeb1;
  --color-nocturnal-expedition-500: #549396;
  --color-nocturnal-expedition-600: #3a787b;
  --color-nocturnal-expedition-700: #256163;
  --color-nocturnal-expedition-800: #004e51;
  --color-nocturnal-expedition-900: #0c3b3d;
  --color-nocturnal-expedition-950: #042527;
  --color-mochaccino: #945514;
  --color-mochaccino-50: #fff3e9;
  --color-mochaccino-100: #ffe5d0;
  --color-mochaccino-200: #ffc99e;
  --color-mochaccino-300: #ecb07e;
  --color-mochaccino-400: #cf8d55;
  --color-mochaccino-500: #b27035;
  --color-mochaccino-600: #945514;
  --color-mochaccino-700: #784101;
  --color-mochaccino-800: #5f3200;
  --color-mochaccino-900: #4b2600;
  --color-mochaccino-950: #301600;
  --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-kindleflame: #ec9570;
  --color-kindleflame-50: #fff8f5;
  --color-kindleflame-100: #ffeee7;
  --color-kindleflame-200: #ffd6c6;
  --color-kindleflame-300: #ffb99c;
  --color-kindleflame-400: #ec9570;
  --color-kindleflame-500: #cb7754;
  --color-kindleflame-600: #ab5a37;
  --color-kindleflame-700: #8c4321;
  --color-kindleflame-800: #703011;
  --color-kindleflame-900: #582206;
  --color-kindleflame-950: #381202;
  --color-pastel-blue: #a0c3ff;
  --color-pastel-blue-50: #f1f6ff;
  --color-pastel-blue-100: #e2edff;
  --color-pastel-blue-200: #c4daff;
  --color-pastel-blue-300: #a0c3ff;
  --color-pastel-blue-400: #83a3db;
  --color-pastel-blue-500: #6787bf;
  --color-pastel-blue-600: #4d6ca2;
  --color-pastel-blue-700: #395586;
  --color-pastel-blue-800: #2a426c;
  --color-pastel-blue-900: #1e3256;
  --color-pastel-blue-950: #101f38;
}