Midnight Express to Droplet Color Palette

About this palette

Midnight Express to Droplet is a 4-color vintage palette: #29273F (Midnight Express), #BD8B5F (Deer), #725220 (Chocolate Rain), #98DFFF (Droplet). It mixes purple, orange, brown, blue tones and feels balanced overall. The strongest text pairing is #29273F on #98DFFF with a contrast ratio of 9.84:1, and 3 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Midnight Express	rgb(41, 39, 63)	hsl(245, 24%, 20%)
Deer	rgb(189, 139, 95)	hsl(28, 42%, 56%)
Chocolate Rain	rgb(114, 82, 32)	hsl(37, 56%, 29%)
Droplet	rgb(152, 223, 255)	hsl(199, 100%, 80%)

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.84:1 Very good#29273F on #98DFFF
Aa9.84:1 Very good#98DFFF on #29273F
Aa4.87:1 Good#725220 on #98DFFF
Aa4.87:1 Good#98DFFF on #725220
Aa4.82:1 Good#29273F on #BD8B5F
Aa4.82:1 Good#BD8B5F on #29273F

Color blindness preview

CSS variables

/* Midnight Express to Droplet — https://swatchly.xyz/palette/29273f-bd8b5f-725220-98dfff */
:root {
  --midnight-express: #29273f;
  --deer: #bd8b5f;
  --chocolate-rain: #725220;
  --droplet: #98dfff;
}

Tailwind CSS v4

/* Midnight Express to Droplet — https://swatchly.xyz/palette/29273f-bd8b5f-725220-98dfff */
@theme {
  --color-midnight-express: #29273f;
  --color-midnight-express-50: #f4f4ff;
  --color-midnight-express-100: #e9e9fd;
  --color-midnight-express-200: #d5d5ec;
  --color-midnight-express-300: #bfbed8;
  --color-midnight-express-400: #9d9cb9;
  --color-midnight-express-500: #817f9c;
  --color-midnight-express-600: #65647f;
  --color-midnight-express-700: #4d4c64;
  --color-midnight-express-800: #3a384d;
  --color-midnight-express-900: #29273f;
  --color-midnight-express-950: #181722;
  --color-deer: #bd8b5f;
  --color-deer-50: #ffeee0;
  --color-deer-100: #ffdfc4;
  --color-deer-200: #f1c7a4;
  --color-deer-300: #dcad86;
  --color-deer-400: #bd8b5f;
  --color-deer-500: #a27246;
  --color-deer-600: #875a30;
  --color-deer-700: #6f461f;
  --color-deer-800: #593613;
  --color-deer-900: #47290a;
  --color-deer-950: #2f1904;
  --color-chocolate-rain: #725220;
  --color-chocolate-rain-50: #fff3e4;
  --color-chocolate-rain-100: #ffe7c8;
  --color-chocolate-rain-200: #efd4ae;
  --color-chocolate-rain-300: #dcbd92;
  --color-chocolate-rain-400: #bf9d6e;
  --color-chocolate-rain-500: #a48251;
  --color-chocolate-rain-600: #896838;
  --color-chocolate-rain-700: #725220;
  --color-chocolate-rain-800: #5a4016;
  --color-chocolate-rain-900: #46300c;
  --color-chocolate-rain-950: #2d1d04;
  --color-droplet: #98dfff;
  --color-droplet-50: #e3f6ff;
  --color-droplet-100: #cbeeff;
  --color-droplet-200: #98dfff;
  --color-droplet-300: #8cc7e3;
  --color-droplet-400: #66a9c7;
  --color-droplet-500: #488eac;
  --color-droplet-600: #2d7490;
  --color-droplet-700: #195d76;
  --color-droplet-800: #094960;
  --color-droplet-900: #01384b;
  --color-droplet-950: #002331;
}