Midnight Express to Chutney color palette

1F263DMidnight Express 3A558BGlimpse of Void 9DD2A0Garden Goddess E18376Island Coral 996363Chutney

About this palette

Midnight Express to Chutney is a 5-color cool, vintage palette: #1F263D (Midnight Express), #3A558B (Glimpse of Void), #9DD2A0 (Garden Goddess), #E18376 (Island Coral), #996363 (Chutney). It mixes blue, green, red tones and feels cool overall. The strongest text pairing is #1F263D on #9DD2A0 with a contrast ratio of 8.67:1, and 2 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Midnight Express	rgb(31, 38, 61)	hsl(226, 33%, 18%)
Glimpse of Void	rgb(58, 85, 139)	hsl(220, 41%, 39%)
Garden Goddess	rgb(157, 210, 160)	hsl(123, 37%, 72%)
Island Coral	rgb(225, 131, 118)	hsl(7, 64%, 67%)
Chutney	rgb(153, 99, 99)	hsl(0, 21%, 49%)

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.67:1 Very good#1F263D on #9DD2A0
Aa8.67:1 Very good#9DD2A0 on #1F263D
Aa5.50:1 Good#1F263D on #E18376
Aa5.50:1 Good#E18376 on #1F263D
Aa4.26:1 Poor#3A558B on #9DD2A0
Aa4.26:1 Poor#9DD2A0 on #3A558B
Aa3.08:1 Poor#1F263D on #996363
Aa3.08:1 Poor#996363 on #1F263D

Color blindness preview

CSS variables

/* Midnight Express to Chutney — https://swatchly.xyz/palette/1f263d-3a558b-9dd2a0-e18376-996363 */
:root {
  --midnight-express: #1f263d;
  --glimpse-of-void: #3a558b;
  --garden-goddess: #9dd2a0;
  --island-coral: #e18376;
  --chutney: #996363;
}

Tailwind CSS v4

/* Midnight Express to Chutney — https://swatchly.xyz/palette/1f263d-3a558b-9dd2a0-e18376-996363 */
@theme {
  --color-midnight-express: #1f263d;
  --color-midnight-express-50: #f1f5ff;
  --color-midnight-express-100: #e4ebfe;
  --color-midnight-express-200: #cfd7ee;
  --color-midnight-express-300: #b7c0da;
  --color-midnight-express-400: #97a1bd;
  --color-midnight-express-500: #7d87a3;
  --color-midnight-express-600: #656e89;
  --color-midnight-express-700: #515972;
  --color-midnight-express-800: #40485d;
  --color-midnight-express-900: #33394c;
  --color-midnight-express-950: #1f263d;
  --color-glimpse-of-void: #3a558b;
  --color-glimpse-of-void-50: #f0f5ff;
  --color-glimpse-of-void-100: #e1ecff;
  --color-glimpse-of-void-200: #c4d8ff;
  --color-glimpse-of-void-300: #a6c2f6;
  --color-glimpse-of-void-400: #84a2db;
  --color-glimpse-of-void-500: #6987c0;
  --color-glimpse-of-void-600: #506ca3;
  --color-glimpse-of-void-700: #3a558b;
  --color-glimpse-of-void-800: #2c426e;
  --color-glimpse-of-void-900: #203257;
  --color-glimpse-of-void-950: #121f3a;
  --color-garden-goddess: #9dd2a0;
  --color-garden-goddess-50: #e2ffe3;
  --color-garden-goddess-100: #d6f6d7;
  --color-garden-goddess-200: #bee5bf;
  --color-garden-goddess-300: #9dd2a0;
  --color-garden-goddess-400: #80b183;
  --color-garden-goddess-500: #639566;
  --color-garden-goddess-600: #497a4d;
  --color-garden-goddess-700: #356239;
  --color-garden-goddess-800: #254d29;
  --color-garden-goddess-900: #1a3c1d;
  --color-garden-goddess-950: #0d2510;
  --color-island-coral: #e18376;
  --color-island-coral-50: #fff1ef;
  --color-island-coral-100: #ffe4df;
  --color-island-coral-200: #ffc8bf;
  --color-island-coral-300: #fba79b;
  --color-island-coral-400: #e18376;
  --color-island-coral-500: #c3685c;
  --color-island-coral-600: #a44e43;
  --color-island-coral-700: #873930;
  --color-island-coral-800: #6d2922;
  --color-island-coral-900: #571d17;
  --color-island-coral-950: #390f0b;
  --color-chutney: #996363;
  --color-chutney-50: #fff1f1;
  --color-chutney-100: #ffe6e5;
  --color-chutney-200: #fbcecd;
  --color-chutney-300: #e9b7b6;
  --color-chutney-400: #ce9796;
  --color-chutney-500: #b47c7c;
  --color-chutney-600: #996363;
  --color-chutney-700: #7d4c4c;
  --color-chutney-800: #64393a;
  --color-chutney-900: #4f2a2b;
  --color-chutney-950: #331919;
}