Midnight Escapade to Frost Fairy color palette

29355AMidnight Escapade 445585Sailor 7B87C3Orbital 626E95Haunt Mist 9DA7CDOld World C0C8EFFrost Fairy

Open in generator Export PNG, PDF, ASE…

About this palette

Midnight Escapade to Frost Fairy is a 6-color cool, monochromatic palette: #29355A (Midnight Escapade), #445585 (Sailor), #7B87C3 (Orbital), #626E95 (Haunt Mist), #9DA7CD (Old World), #C0C8EF (Frost Fairy). It mixes blue, purple tones and feels cool overall. The strongest text pairing is #29355A on #C0C8EF with a contrast ratio of 7.28:1, and 2 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Midnight Escapade	rgb(41, 53, 90)	hsl(225, 37%, 26%)
Sailor	rgb(68, 85, 133)	hsl(224, 32%, 39%)
Orbital	rgb(123, 135, 195)	hsl(230, 37%, 62%)
Haunt Mist	rgb(98, 110, 149)	hsl(226, 21%, 48%)
Old World	rgb(157, 167, 205)	hsl(228, 32%, 71%)
Frost Fairy	rgb(192, 200, 239)	hsl(230, 59%, 85%)

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.

Aa7.28:1 Very good#29355A on #C0C8EF
Aa7.28:1 Very good#C0C8EF on #29355A
Aa5.05:1 Good#29355A on #9DA7CD
Aa5.05:1 Good#9DA7CD on #29355A
Aa4.42:1 Poor#445585 on #C0C8EF
Aa4.42:1 Poor#C0C8EF on #445585
Aa3.48:1 Poor#29355A on #7B87C3
Aa3.48:1 Poor#7B87C3 on #29355A

Color blindness preview

CSS variables

/* Midnight Escapade to Frost Fairy — https://swatchly.xyz/palette/29355a-445585-7b87c3-626e95-9da7cd-c0c8ef */
:root {
  --midnight-escapade: #29355a;
  --sailor: #445585;
  --orbital: #7b87c3;
  --haunt-mist: #626e95;
  --old-world: #9da7cd;
  --frost-fairy: #c0c8ef;
}

Tailwind CSS v4

/* Midnight Escapade to Frost Fairy — https://swatchly.xyz/palette/29355a-445585-7b87c3-626e95-9da7cd-c0c8ef */
@theme {
  --color-midnight-escapade: #29355a;
  --color-midnight-escapade-50: #f1f5ff;
  --color-midnight-escapade-100: #e3ebff;
  --color-midnight-escapade-200: #cad7f9;
  --color-midnight-escapade-300: #b2c0e7;
  --color-midnight-escapade-400: #92a1cc;
  --color-midnight-escapade-500: #7787b1;
  --color-midnight-escapade-600: #5e6d96;
  --color-midnight-escapade-700: #4a577c;
  --color-midnight-escapade-800: #394566;
  --color-midnight-escapade-900: #29355a;
  --color-midnight-escapade-950: #1b2236;
  --color-sailor: #445585;
  --color-sailor-50: #f1f5ff;
  --color-sailor-100: #e3ebff;
  --color-sailor-200: #c8d7ff;
  --color-sailor-300: #afc1f0;
  --color-sailor-400: #8ea1d4;
  --color-sailor-500: #7386b9;
  --color-sailor-600: #5a6c9d;
  --color-sailor-700: #445585;
  --color-sailor-800: #344269;
  --color-sailor-900: #273253;
  --color-sailor-950: #171f37;
  --color-orbital: #7b87c3;
  --color-orbital-50: #f3f6ff;
  --color-orbital-100: #e8ecff;
  --color-orbital-200: #cfd8ff;
  --color-orbital-300: #b6c1f7;
  --color-orbital-400: #96a2dd;
  --color-orbital-500: #7b87c3;
  --color-orbital-600: #616ba5;
  --color-orbital-700: #4b5488;
  --color-orbital-800: #39406e;
  --color-orbital-900: #2a3157;
  --color-orbital-950: #191d39;
  --color-haunt-mist: #626e95;
  --color-haunt-mist-50: #f1f5ff;
  --color-haunt-mist-100: #e5ebff;
  --color-haunt-mist-200: #cdd8f8;
  --color-haunt-mist-300: #b6c2e6;
  --color-haunt-mist-400: #96a3cb;
  --color-haunt-mist-500: #7b88b0;
  --color-haunt-mist-600: #626e95;
  --color-haunt-mist-700: #4c577a;
  --color-haunt-mist-800: #3a4362;
  --color-haunt-mist-900: #2b334d;
  --color-haunt-mist-950: #1a1f32;
  --color-old-world: #9da7cd;
  --color-old-world-50: #f5f7ff;
  --color-old-world-100: #eaeeff;
  --color-old-world-200: #d4dbf8;
  --color-old-world-300: #bdc6e6;
  --color-old-world-400: #9da7cd;
  --color-old-world-500: #818aaf;
  --color-old-world-600: #666e91;
  --color-old-world-700: #4f5776;
  --color-old-world-800: #3c435e;
  --color-old-world-900: #2d324a;
  --color-old-world-950: #1a1e2f;
  --color-frost-fairy: #c0c8ef;
  --color-frost-fairy-50: #f8faff;
  --color-frost-fairy-100: #eef1ff;
  --color-frost-fairy-200: #d8defa;
  --color-frost-fairy-300: #c0c8ef;
  --color-frost-fairy-400: #a0a7ca;
  --color-frost-fairy-500: #838aae;
  --color-frost-fairy-600: #676e90;
  --color-frost-fairy-700: #505675;
  --color-frost-fairy-800: #3d425d;
  --color-frost-fairy-900: #2d3148;
  --color-frost-fairy-950: #1b1e2e;
}