Pink Mist to Midnight Express color palette

E5B9C8Pink Mist A2AA59Springtide Melodies 928300Captain Kirk 006A5ATerrestrial 272436Midnight Express

Open in generator Export PNG, PDF, ASE…

About this palette

Pink Mist to Midnight Express is a 5-color warm, vintage palette: #E5B9C8 (Pink Mist), #A2AA59 (Springtide Melodies), #928300 (Captain Kirk), #006A5A (Terrestrial), #272436 (Midnight Express). It mixes pink, green, yellow, turquoise, gray tones and feels warm overall. The strongest text pairing is #E5B9C8 on #272436 with a contrast ratio of 8.70:1, and 2 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Pink Mist	rgb(229, 185, 200)	hsl(340, 46%, 81%)
Springtide Melodies	rgb(162, 170, 89)	hsl(66, 32%, 51%)
Captain Kirk	rgb(146, 131, 0)	hsl(54, 100%, 29%)
Terrestrial	rgb(0, 106, 90)	hsl(171, 100%, 21%)
Midnight Express	rgb(39, 36, 54)	hsl(250, 20%, 18%)

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.

Aa8.70:1 Very good#E5B9C8 on #272436
Aa8.70:1 Very good#272436 on #E5B9C8
Aa6.06:1 Good#A2AA59 on #272436
Aa6.06:1 Good#272436 on #A2AA59
Aa3.93:1 Poor#928300 on #272436
Aa3.93:1 Poor#272436 on #928300
Aa3.77:1 Poor#E5B9C8 on #006A5A
Aa3.77:1 Poor#006A5A on #E5B9C8

Color blindness preview

CSS variables

/* Pink Mist to Midnight Express — https://swatchly.xyz/palette/e5b9c8-a2aa59-928300-006a5a-272436 */
:root {
  --pink-mist: #e5b9c8;
  --springtide-melodies: #a2aa59;
  --captain-kirk: #928300;
  --terrestrial: #006a5a;
  --midnight-express: #272436;
}

Tailwind CSS v4

/* Pink Mist to Midnight Express — https://swatchly.xyz/palette/e5b9c8-a2aa59-928300-006a5a-272436 */
@theme {
  --color-pink-mist: #e5b9c8;
  --color-pink-mist-50: #fff5f8;
  --color-pink-mist-100: #ffe8f0;
  --color-pink-mist-200: #f3d3dd;
  --color-pink-mist-300: #e5b9c8;
  --color-pink-mist-400: #c29aa7;
  --color-pink-mist-500: #a57d8b;
  --color-pink-mist-600: #88626f;
  --color-pink-mist-700: #6e4b58;
  --color-pink-mist-800: #573944;
  --color-pink-mist-900: #432a33;
  --color-pink-mist-950: #2b1920;
  --color-springtide-melodies: #a2aa59;
  --color-springtide-melodies-50: #f5fbce;
  --color-springtide-melodies-100: #ebf1c0;
  --color-springtide-melodies-200: #d7dfa3;
  --color-springtide-melodies-300: #c1c985;
  --color-springtide-melodies-400: #a2aa59;
  --color-springtide-melodies-500: #878e3d;
  --color-springtide-melodies-600: #6c7320;
  --color-springtide-melodies-700: #565b07;
  --color-springtide-melodies-800: #434700;
  --color-springtide-melodies-900: #333700;
  --color-springtide-melodies-950: #1f2200;
  --color-captain-kirk: #928300;
  --color-captain-kirk-50: #fef7c0;
  --color-captain-kirk-100: #f4ecae;
  --color-captain-kirk-200: #e2d88d;
  --color-captain-kirk-300: #ccc069;
  --color-captain-kirk-400: #aea039;
  --color-captain-kirk-500: #928300;
  --color-captain-kirk-600: #766900;
  --color-captain-kirk-700: #5d5300;
  --color-captain-kirk-800: #494100;
  --color-captain-kirk-900: #393200;
  --color-captain-kirk-950: #241f00;
  --color-terrestrial: #006a5a;
  --color-terrestrial-50: #d8fff5;
  --color-terrestrial-100: #c6f8eb;
  --color-terrestrial-200: #ace7d8;
  --color-terrestrial-300: #8ed3c2;
  --color-terrestrial-400: #67b6a4;
  --color-terrestrial-500: #479b89;
  --color-terrestrial-600: #2a8170;
  --color-terrestrial-700: #006a5a;
  --color-terrestrial-800: #005346;
  --color-terrestrial-900: #004036;
  --color-terrestrial-950: #002921;
  --color-midnight-express: #272436;
  --color-midnight-express-50: #f5f3ff;
  --color-midnight-express-100: #ebe9f8;
  --color-midnight-express-200: #d7d5e7;
  --color-midnight-express-300: #c1bed2;
  --color-midnight-express-400: #a19eb4;
  --color-midnight-express-500: #88859b;
  --color-midnight-express-600: #6f6c81;
  --color-midnight-express-700: #5a576a;
  --color-midnight-express-800: #484557;
  --color-midnight-express-900: #3a3746;
  --color-midnight-express-950: #272436;
}