Cold White to Nocturnal Expedition Color Palette

About this palette

Cold White to Nocturnal Expedition is a 5-color vintage palette: #ECFCFF (Cold White), #FFABAC (Apricot Haze), #00B3D1 (Aquarius), #BD4246 (Dragon’s Blood), #004A56 (Nocturnal Expedition). It mixes white, pink, blue, red, turquoise tones and feels balanced overall. The strongest text pairing is #ECFCFF on #004A56 with a contrast ratio of 9.43:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Cold White	rgb(236, 252, 255)	hsl(189, 100%, 96%)
Apricot Haze	rgb(255, 171, 172)	hsl(359, 100%, 84%)
Aquarius	rgb(0, 179, 209)	hsl(189, 100%, 41%)
Dragon’s Blood	rgb(189, 66, 70)	hsl(358, 48%, 50%)
Nocturnal Expedition	rgb(0, 74, 86)	hsl(188, 100%, 17%)

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.

Aa9.43:1 Very good#ECFCFF on #004A56
Aa9.43:1 Very good#004A56 on #ECFCFF
Aa5.52:1 Good#FFABAC on #004A56
Aa5.52:1 Good#004A56 on #FFABAC
Aa4.94:1 Good#ECFCFF on #BD4246
Aa4.94:1 Good#BD4246 on #ECFCFF
Aa3.96:1 Poor#00B3D1 on #004A56
Aa3.96:1 Poor#004A56 on #00B3D1

Color blindness preview

CSS variables

/* Cold White to Nocturnal Expedition — https://swatchly.xyz/palette/ecfcff-ffabac-00b3d1-bd4246-004a56 */
:root {
  --cold-white: #ecfcff;
  --apricot-haze: #ffabac;
  --aquarius: #00b3d1;
  --dragon-s-blood: #bd4246;
  --nocturnal-expedition: #004a56;
}

Tailwind CSS v4

/* Cold White to Nocturnal Expedition — https://swatchly.xyz/palette/ecfcff-ffabac-00b3d1-bd4246-004a56 */
@theme {
  --color-cold-white: #ecfcff;
  --color-cold-white-50: #ecfcff;
  --color-cold-white-100: #e7f0f2;
  --color-cold-white-200: #d1dcde;
  --color-cold-white-300: #b8c5c8;
  --color-cold-white-400: #97a6a8;
  --color-cold-white-500: #7b8a8c;
  --color-cold-white-600: #616f71;
  --color-cold-white-700: #4b585a;
  --color-cold-white-800: #3a4547;
  --color-cold-white-900: #2c3536;
  --color-cold-white-950: #1a2122;
  --color-apricot-haze: #ffabac;
  --color-apricot-haze-50: #fff4f4;
  --color-apricot-haze-100: #ffe8e7;
  --color-apricot-haze-200: #ffcdcc;
  --color-apricot-haze-300: #ffabac;
  --color-apricot-haze-400: #da8d8e;
  --color-apricot-haze-500: #bd6f71;
  --color-apricot-haze-600: #9f5557;
  --color-apricot-haze-700: #823f42;
  --color-apricot-haze-800: #682e31;
  --color-apricot-haze-900: #522124;
  --color-apricot-haze-950: #361214;
  --color-aquarius: #00b3d1;
  --color-aquarius-50: #e3f9ff;
  --color-aquarius-100: #c7f3ff;
  --color-aquarius-200: #8be7fd;
  --color-aquarius-300: #62d1eb;
  --color-aquarius-400: #00b3d1;
  --color-aquarius-500: #0095ae;
  --color-aquarius-600: #00788d;
  --color-aquarius-700: #005f70;
  --color-aquarius-800: #004b58;
  --color-aquarius-900: #003a45;
  --color-aquarius-950: #00242c;
  --color-dragon-s-blood: #bd4246;
  --color-dragon-s-blood-50: #fff2f1;
  --color-dragon-s-blood-100: #ffe6e4;
  --color-dragon-s-blood-200: #ffcbc8;
  --color-dragon-s-blood-300: #ffaba7;
  --color-dragon-s-blood-400: #f67c7b;
  --color-dragon-s-blood-500: #db5e5f;
  --color-dragon-s-blood-600: #bd4246;
  --color-dragon-s-blood-700: #9d2b32;
  --color-dragon-s-blood-800: #801a22;
  --color-dragon-s-blood-900: #660d17;
  --color-dragon-s-blood-950: #43040b;
  --color-nocturnal-expedition: #004a56;
  --color-nocturnal-expedition-50: #e4faff;
  --color-nocturnal-expedition-100: #cdf3fc;
  --color-nocturnal-expedition-200: #b4e1eb;
  --color-nocturnal-expedition-300: #97cbd6;
  --color-nocturnal-expedition-400: #72acb9;
  --color-nocturnal-expedition-500: #54909d;
  --color-nocturnal-expedition-600: #397581;
  --color-nocturnal-expedition-700: #255d68;
  --color-nocturnal-expedition-800: #004a56;
  --color-nocturnal-expedition-900: #0c3841;
  --color-nocturnal-expedition-950: #042329;
}