Midnight Express to Icy Plains Color Palette

About this palette

Midnight Express to Icy Plains is a 5-color muted, cool, monochromatic, gradient palette: #27263A (Midnight Express), #4B4F6C (Intergalactic), #747BBF (Flood), #989ABA (Moon Veil), #D8D8FF (Icy Plains). It mixes purple tones and feels cool overall. The strongest text pairing is #27263A on #D8D8FF with a contrast ratio of 10.66:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Midnight Express	rgb(39, 38, 58)	hsl(243, 21%, 19%)
Intergalactic	rgb(75, 79, 108)	hsl(233, 18%, 36%)
Flood	rgb(116, 123, 191)	hsl(234, 37%, 60%)
Moon Veil	rgb(152, 154, 186)	hsl(236, 20%, 66%)
Icy Plains	rgb(216, 216, 255)	hsl(240, 100%, 92%)

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.

Aa10.66:1 Very good#27263A on #D8D8FF
Aa10.66:1 Very good#D8D8FF on #27263A
Aa5.77:1 Good#4B4F6C on #D8D8FF
Aa5.77:1 Good#D8D8FF on #4B4F6C
Aa5.38:1 Good#27263A on #989ABA
Aa5.38:1 Good#989ABA on #27263A
Aa3.74:1 Poor#27263A on #747BBF
Aa3.74:1 Poor#747BBF on #27263A

Color blindness preview

CSS variables

/* Midnight Express to Icy Plains — https://swatchly.xyz/palette/27263a-4b4f6c-747bbf-989aba-d8d8ff */
:root {
  --midnight-express: #27263a;
  --intergalactic: #4b4f6c;
  --flood: #747bbf;
  --moon-veil: #989aba;
  --icy-plains: #d8d8ff;
}

Tailwind CSS v4

/* Midnight Express to Icy Plains — https://swatchly.xyz/palette/27263a-4b4f6c-747bbf-989aba-d8d8ff */
@theme {
  --color-midnight-express: #27263a;
  --color-midnight-express-50: #f4f4ff;
  --color-midnight-express-100: #e9e9fa;
  --color-midnight-express-200: #d5d5e9;
  --color-midnight-express-300: #bfbed5;
  --color-midnight-express-400: #9f9fb7;
  --color-midnight-express-500: #86859e;
  --color-midnight-express-600: #6d6d84;
  --color-midnight-express-700: #59586e;
  --color-midnight-express-800: #48475a;
  --color-midnight-express-900: #3a394a;
  --color-midnight-express-950: #27263a;
  --color-intergalactic: #4b4f6c;
  --color-intergalactic-50: #f3f4ff;
  --color-intergalactic-100: #e6eaff;
  --color-intergalactic-200: #d1d5ef;
  --color-intergalactic-300: #b9bddb;
  --color-intergalactic-400: #989dbd;
  --color-intergalactic-500: #7c81a1;
  --color-intergalactic-600: #626684;
  --color-intergalactic-700: #4b4f6c;
  --color-intergalactic-800: #3a3d54;
  --color-intergalactic-900: #2c2f42;
  --color-intergalactic-950: #1b1c2a;
  --color-flood: #747bbf;
  --color-flood-50: #f2f4ff;
  --color-flood-100: #e4e8ff;
  --color-flood-200: #cbd2ff;
  --color-flood-300: #b0b9f8;
  --color-flood-400: #9097dc;
  --color-flood-500: #747bbf;
  --color-flood-600: #5c61a2;
  --color-flood-700: #474c86;
  --color-flood-800: #373a6d;
  --color-flood-900: #2a2c57;
  --color-flood-950: #191b3a;
  --color-moon-veil: #989aba;
  --color-moon-veil-50: #f1f2ff;
  --color-moon-veil-100: #e5e7fd;
  --color-moon-veil-200: #d0d2ec;
  --color-moon-veil-300: #b8bad7;
  --color-moon-veil-400: #989aba;
  --color-moon-veil-500: #7e809e;
  --color-moon-veil-600: #656683;
  --color-moon-veil-700: #4f516b;
  --color-moon-veil-800: #3e3f56;
  --color-moon-veil-900: #2f3044;
  --color-moon-veil-950: #1d1e2c;
  --color-icy-plains: #d8d8ff;
  --color-icy-plains-50: #f7f8ff;
  --color-icy-plains-100: #ededff;
  --color-icy-plains-200: #d8d8ff;
  --color-icy-plains-300: #c1c1e1;
  --color-icy-plains-400: #a1a1c4;
  --color-icy-plains-500: #8584a8;
  --color-icy-plains-600: #6a698b;
  --color-icy-plains-700: #535271;
  --color-icy-plains-800: #403f59;
  --color-icy-plains-900: #313046;
  --color-icy-plains-950: #1e1d2d;
}