Sail Into the Horizon to Midnight Express color palette

A4BADESail Into the Horizon 6E87A7English Manor 4F6686Admiral Blue 324058Pi 212A3CMidnight Express

About this palette

Sail Into the Horizon to Midnight Express is a 5-color muted, cool, monochromatic, gradient palette: #A4BADE (Sail Into the Horizon), #6E87A7 (English Manor), #4F6686 (Admiral Blue), #324058 (Pi), #212A3C (Midnight Express). It mixes blue tones and feels cool overall. The strongest text pairing is #A4BADE on #212A3C with a contrast ratio of 7.29:1, and 2 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Sail Into the Horizon	rgb(164, 186, 222)	hsl(217, 47%, 76%)
English Manor	rgb(110, 135, 167)	hsl(214, 24%, 54%)
Admiral Blue	rgb(79, 102, 134)	hsl(215, 26%, 42%)
Pi	rgb(50, 64, 88)	hsl(218, 28%, 27%)
Midnight Express	rgb(33, 42, 60)	hsl(220, 29%, 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.

Aa7.29:1 Very good#A4BADE on #212A3C
Aa7.29:1 Very good#212A3C on #A4BADE
Aa5.30:1 Good#A4BADE on #324058
Aa5.30:1 Good#324058 on #A4BADE
Aa3.89:1 Poor#6E87A7 on #212A3C
Aa3.89:1 Poor#212A3C on #6E87A7

Color blindness preview

CSS variables

/* Sail Into the Horizon to Midnight Express — https://swatchly.xyz/palette/a4bade-6e87a7-4f6686-324058-212a3c */
:root {
  --sail-into-the-horizon: #a4bade;
  --english-manor: #6e87a7;
  --admiral-blue: #4f6686;
  --pi: #324058;
  --midnight-express: #212a3c;
}

Tailwind CSS v4

/* Sail Into the Horizon to Midnight Express — https://swatchly.xyz/palette/a4bade-6e87a7-4f6686-324058-212a3c */
@theme {
  --color-sail-into-the-horizon: #a4bade;
  --color-sail-into-the-horizon-50: #e9f1ff;
  --color-sail-into-the-horizon-100: #d8e7ff;
  --color-sail-into-the-horizon-200: #c0d2ee;
  --color-sail-into-the-horizon-300: #a4bade;
  --color-sail-into-the-horizon-400: #879cbe;
  --color-sail-into-the-horizon-500: #6d82a4;
  --color-sail-into-the-horizon-600: #566989;
  --color-sail-into-the-horizon-700: #425370;
  --color-sail-into-the-horizon-800: #32425b;
  --color-sail-into-the-horizon-900: #263348;
  --color-sail-into-the-horizon-950: #161f2f;
  --color-english-manor: #6e87a7;
  --color-english-manor-50: #eef6ff;
  --color-english-manor-100: #deecff;
  --color-english-manor-200: #c5d9f3;
  --color-english-manor-300: #abc2e0;
  --color-english-manor-400: #8aa3c3;
  --color-english-manor-500: #6e87a7;
  --color-english-manor-600: #556d8b;
  --color-english-manor-700: #415671;
  --color-english-manor-800: #30435b;
  --color-english-manor-900: #243348;
  --color-english-manor-950: #14202e;
  --color-admiral-blue: #4f6686;
  --color-admiral-blue-50: #eff6ff;
  --color-admiral-blue-100: #ddebff;
  --color-admiral-blue-200: #c3d7f2;
  --color-admiral-blue-300: #a8bfde;
  --color-admiral-blue-400: #869ec0;
  --color-admiral-blue-500: #6a82a3;
  --color-admiral-blue-600: #4f6686;
  --color-admiral-blue-700: #3d516c;
  --color-admiral-blue-800: #2e3f57;
  --color-admiral-blue-900: #223045;
  --color-admiral-blue-950: #131e2c;
  --color-pi: #324058;
  --color-pi-50: #f0f5ff;
  --color-pi-100: #e1ecff;
  --color-pi-200: #cbd8ee;
  --color-pi-300: #b2c1da;
  --color-pi-400: #91a1bc;
  --color-pi-500: #7585a1;
  --color-pi-600: #5b6a84;
  --color-pi-700: #46536a;
  --color-pi-800: #324058;
  --color-pi-900: #273142;
  --color-pi-950: #171e2a;
  --color-midnight-express: #212a3c;
  --color-midnight-express-50: #f0f5ff;
  --color-midnight-express-100: #e4ebfb;
  --color-midnight-express-200: #cfd8ea;
  --color-midnight-express-300: #b7c1d5;
  --color-midnight-express-400: #95a0b6;
  --color-midnight-express-500: #788399;
  --color-midnight-express-600: #5d677b;
  --color-midnight-express-700: #464f61;
  --color-midnight-express-800: #333b4a;
  --color-midnight-express-900: #212a3c;
  --color-midnight-express-950: #141921;
}