Moonless Mystery to Cosmic Latte Color Palette

About this palette

Moonless Mystery to Cosmic Latte is a 5-color muted palette: #212530 (Moonless Mystery), #645739 (Olive Bark), #7E83AF (Aster), #A9BAE8 (Blue Lips), #FFF8E8 (Cosmic Latte). It mixes gray, brown, purple, blue, white tones and feels cool overall. The strongest text pairing is #212530 on #FFF8E8 with a contrast ratio of 14.46:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Moonless Mystery	rgb(33, 37, 48)	hsl(224, 19%, 16%)
Olive Bark	rgb(100, 87, 57)	hsl(42, 27%, 31%)
Aster	rgb(126, 131, 175)	hsl(234, 23%, 59%)
Blue Lips	rgb(169, 186, 232)	hsl(224, 58%, 79%)
Cosmic Latte	rgb(255, 248, 232)	hsl(42, 100%, 95%)

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.

Aa14.46:1 Super#212530 on #FFF8E8
Aa14.46:1 Super#FFF8E8 on #212530
Aa7.93:1 Very good#212530 on #A9BAE8
Aa7.93:1 Very good#A9BAE8 on #212530
Aa6.69:1 Good#645739 on #FFF8E8
Aa6.69:1 Good#FFF8E8 on #645739
Aa4.19:1 Poor#212530 on #7E83AF
Aa4.19:1 Poor#7E83AF on #212530

Color blindness preview

CSS variables

/* Moonless Mystery to Cosmic Latte — https://swatchly.xyz/palette/212530-645739-7e83af-a9bae8-fff8e8 */
:root {
  --moonless-mystery: #212530;
  --olive-bark: #645739;
  --aster: #7e83af;
  --blue-lips: #a9bae8;
  --cosmic-latte: #fff8e8;
}

Tailwind CSS v4

/* Moonless Mystery to Cosmic Latte — https://swatchly.xyz/palette/212530-645739-7e83af-a9bae8-fff8e8 */
@theme {
  --color-moonless-mystery: #212530;
  --color-moonless-mystery-50: #f2f5fd;
  --color-moonless-mystery-100: #e7ebf4;
  --color-moonless-mystery-200: #d3d7e2;
  --color-moonless-mystery-300: #bcc1cd;
  --color-moonless-mystery-400: #9ca1af;
  --color-moonless-mystery-500: #828795;
  --color-moonless-mystery-600: #696e7b;
  --color-moonless-mystery-700: #545964;
  --color-moonless-mystery-800: #434751;
  --color-moonless-mystery-900: #353841;
  --color-moonless-mystery-950: #212530;
  --color-olive-bark: #645739;
  --color-olive-bark-50: #fdf4e2;
  --color-olive-bark-100: #f4ead5;
  --color-olive-bark-200: #e2d7be;
  --color-olive-bark-300: #cdc1a5;
  --color-olive-bark-400: #b0a283;
  --color-olive-bark-500: #958768;
  --color-olive-bark-600: #7a6d4f;
  --color-olive-bark-700: #645739;
  --color-olive-bark-800: #4e442b;
  --color-olive-bark-900: #3d341f;
  --color-olive-bark-950: #262011;
  --color-aster: #7e83af;
  --color-aster-50: #f3f4ff;
  --color-aster-100: #e7eaff;
  --color-aster-200: #d0d5f9;
  --color-aster-300: #b9bee6;
  --color-aster-400: #999eca;
  --color-aster-500: #7e83af;
  --color-aster-600: #646892;
  --color-aster-700: #4e5278;
  --color-aster-800: #3c3f60;
  --color-aster-900: #2e304c;
  --color-aster-950: #1c1d31;
  --color-blue-lips: #a9bae8;
  --color-blue-lips-50: #edf2ff;
  --color-blue-lips-100: #dee7ff;
  --color-blue-lips-200: #c4d2f6;
  --color-blue-lips-300: #a9bae8;
  --color-blue-lips-400: #8c9cc7;
  --color-blue-lips-500: #7281ac;
  --color-blue-lips-600: #596890;
  --color-blue-lips-700: #455277;
  --color-blue-lips-800: #354060;
  --color-blue-lips-900: #28324d;
  --color-blue-lips-950: #181e32;
  --color-cosmic-latte: #fff8e8;
  --color-cosmic-latte-50: #fff8e8;
  --color-cosmic-latte-100: #f2eee4;
  --color-cosmic-latte-200: #ded9ce;
  --color-cosmic-latte-300: #c8c2b5;
  --color-cosmic-latte-400: #a8a294;
  --color-cosmic-latte-500: #8c8678;
  --color-cosmic-latte-600: #716b5e;
  --color-cosmic-latte-700: #5a5548;
  --color-cosmic-latte-800: #474237;
  --color-cosmic-latte-900: #363229;
  --color-cosmic-latte-950: #221f18;
}