Midnight Dreams to Coffee Whip Color Palette

About this palette

Midnight Dreams to Coffee Whip is a 4-color palette: #00273A (Midnight Dreams), #C5FFD9 (Toxic Steam), #8C2086 (Noble Plum), #DE9855 (Coffee Whip). It mixes blue, green, pink, orange tones and feels balanced overall. The strongest text pairing is #00273A on #C5FFD9 with a contrast ratio of 13.82:1, and 3 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Midnight Dreams	rgb(0, 39, 58)	hsl(200, 100%, 11%)
Toxic Steam	rgb(197, 255, 217)	hsl(141, 100%, 89%)
Noble Plum	rgb(140, 32, 134)	hsl(303, 63%, 34%)
Coffee Whip	rgb(222, 152, 85)	hsl(29, 67%, 60%)

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.

Aa13.82:1 Super#00273A on #C5FFD9
Aa13.82:1 Super#C5FFD9 on #00273A
Aa7.01:1 Very good#C5FFD9 on #8C2086
Aa7.01:1 Very good#8C2086 on #C5FFD9
Aa6.46:1 Good#00273A on #DE9855
Aa6.46:1 Good#DE9855 on #00273A
Aa3.27:1 Poor#8C2086 on #DE9855
Aa3.27:1 Poor#DE9855 on #8C2086

Color blindness preview

CSS variables

/* Midnight Dreams to Coffee Whip — https://swatchly.xyz/palette/00273a-c5ffd9-8c2086-de9855 */
:root {
  --midnight-dreams: #00273a;
  --toxic-steam: #c5ffd9;
  --noble-plum: #8c2086;
  --coffee-whip: #de9855;
}

Tailwind CSS v4

/* Midnight Dreams to Coffee Whip — https://swatchly.xyz/palette/00273a-c5ffd9-8c2086-de9855 */
@theme {
  --color-midnight-dreams: #00273a;
  --color-midnight-dreams-50: #ebf7ff;
  --color-midnight-dreams-100: #d7efff;
  --color-midnight-dreams-200: #bfdcef;
  --color-midnight-dreams-300: #a5c6db;
  --color-midnight-dreams-400: #82a7be;
  --color-midnight-dreams-500: #678da4;
  --color-midnight-dreams-600: #4e7389;
  --color-midnight-dreams-700: #3a5c70;
  --color-midnight-dreams-800: #2b4a5b;
  --color-midnight-dreams-900: #203a49;
  --color-midnight-dreams-950: #00273a;
  --color-toxic-steam: #c5ffd9;
  --color-toxic-steam-50: #e8ffef;
  --color-toxic-steam-100: #c5ffd9;
  --color-toxic-steam-200: #bde6cb;
  --color-toxic-steam-300: #a1d0b2;
  --color-toxic-steam-400: #7db190;
  --color-toxic-steam-500: #5f9573;
  --color-toxic-steam-600: #457a59;
  --color-toxic-steam-700: #306144;
  --color-toxic-steam-800: #214d33;
  --color-toxic-steam-900: #163b26;
  --color-toxic-steam-950: #0a2516;
  --color-noble-plum: #8c2086;
  --color-noble-plum-50: #fff0fd;
  --color-noble-plum-100: #ffe0fb;
  --color-noble-plum-200: #ffc0f7;
  --color-noble-plum-300: #fa9bf0;
  --color-noble-plum-400: #de76d5;
  --color-noble-plum-500: #c358ba;
  --color-noble-plum-600: #a53c9e;
  --color-noble-plum-700: #8c2086;
  --color-noble-plum-800: #6f166a;
  --color-noble-plum-900: #580a54;
  --color-noble-plum-950: #3a0337;
  --color-coffee-whip: #de9855;
  --color-coffee-whip-50: #fff6ef;
  --color-coffee-whip-100: #ffecdb;
  --color-coffee-whip-200: #ffd4ae;
  --color-coffee-whip-300: #f5ba85;
  --color-coffee-whip-400: #de9855;
  --color-coffee-whip-500: #be7b37;
  --color-coffee-whip-600: #a05f14;
  --color-coffee-whip-700: #814900;
  --color-coffee-whip-800: #653800;
  --color-coffee-whip-900: #4e2a00;
  --color-coffee-whip-950: #311800;
}