Après-Ski to Midnight Express color palette

D4D3E9Après-Ski B0A9C6Monet Magic 8F8BB8Magic Carpet 626074Venus Mist 48465BGun Powder 2A2538Midnight Express

Open in generator Export PNG, PDF, ASE…

About this palette

Après-Ski to Midnight Express is a 6-color muted, cool, gradient palette: #D4D3E9 (Après-Ski), #B0A9C6 (Monet Magic), #8F8BB8 (Magic Carpet), #626074 (Venus Mist), #48465B (Gun Powder), #2A2538 (Midnight Express). It mixes gray, purple tones and feels cool overall. The strongest text pairing is #D4D3E9 on #2A2538 with a contrast ratio of 10.06:1, and 4 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Après-Ski	rgb(212, 211, 233)	hsl(243, 33%, 87%)
Monet Magic	rgb(176, 169, 198)	hsl(254, 20%, 72%)
Magic Carpet	rgb(143, 139, 184)	hsl(245, 24%, 63%)
Venus Mist	rgb(98, 96, 116)	hsl(246, 9%, 42%)
Gun Powder	rgb(72, 70, 91)	hsl(246, 13%, 32%)
Midnight Express	rgb(42, 37, 56)	hsl(256, 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.

Aa10.06:1 Very good#D4D3E9 on #2A2538
Aa10.06:1 Very good#2A2538 on #D4D3E9
Aa6.57:1 Good#B0A9C6 on #2A2538
Aa6.57:1 Good#2A2538 on #B0A9C6
Aa6.21:1 Good#D4D3E9 on #48465B
Aa6.21:1 Good#48465B on #D4D3E9
Aa4.61:1 Good#8F8BB8 on #2A2538
Aa4.61:1 Good#2A2538 on #8F8BB8

Color blindness preview

CSS variables

/* Après-Ski to Midnight Express — https://swatchly.xyz/palette/d4d3e9-b0a9c6-8f8bb8-626074-48465b-2a2538 */
:root {
  --apr-s-ski: #d4d3e9;
  --monet-magic: #b0a9c6;
  --magic-carpet: #8f8bb8;
  --venus-mist: #626074;
  --gun-powder: #48465b;
  --midnight-express: #2a2538;
}

Tailwind CSS v4

/* Après-Ski to Midnight Express — https://swatchly.xyz/palette/d4d3e9-b0a9c6-8f8bb8-626074-48465b-2a2538 */
@theme {
  --color-apr-s-ski: #d4d3e9;
  --color-apr-s-ski-50: #f3f2ff;
  --color-apr-s-ski-100: #e8e8f6;
  --color-apr-s-ski-200: #d4d3e9;
  --color-apr-s-ski-300: #bebdd0;
  --color-apr-s-ski-400: #9f9eb2;
  --color-apr-s-ski-500: #848397;
  --color-apr-s-ski-600: #6a697c;
  --color-apr-s-ski-700: #545364;
  --color-apr-s-ski-800: #41404f;
  --color-apr-s-ski-900: #32313e;
  --color-apr-s-ski-950: #1f1e27;
  --color-monet-magic: #b0a9c6;
  --color-monet-magic-50: #faf8ff;
  --color-monet-magic-100: #f3efff;
  --color-monet-magic-200: #e2ddf2;
  --color-monet-magic-300: #cdc8e0;
  --color-monet-magic-400: #b0a9c6;
  --color-monet-magic-500: #928ba7;
  --color-monet-magic-600: #756f8a;
  --color-monet-magic-700: #5d566f;
  --color-monet-magic-800: #484257;
  --color-monet-magic-900: #363143;
  --color-monet-magic-950: #201d29;
  --color-magic-carpet: #8f8bb8;
  --color-magic-carpet-50: #f6f6ff;
  --color-magic-carpet-100: #eeedff;
  --color-magic-carpet-200: #dbd9fc;
  --color-magic-carpet-300: #c7c4eb;
  --color-magic-carpet-400: #a9a5d1;
  --color-magic-carpet-500: #8f8bb8;
  --color-magic-carpet-600: #736f9a;
  --color-magic-carpet-700: #5a567e;
  --color-magic-carpet-800: #464265;
  --color-magic-carpet-900: #35324f;
  --color-magic-carpet-950: #201e32;
  --color-venus-mist: #626074;
  --color-venus-mist-50: #f5f4ff;
  --color-venus-mist-100: #e9e7f6;
  --color-venus-mist-200: #d3d2e3;
  --color-venus-mist-300: #bbb9cd;
  --color-venus-mist-400: #9a98ad;
  --color-venus-mist-500: #7d7b90;
  --color-venus-mist-600: #626074;
  --color-venus-mist-700: #4d4c5d;
  --color-venus-mist-800: #3c3b4a;
  --color-venus-mist-900: #2e2d3a;
  --color-venus-mist-950: #1c1b24;
  --color-gun-powder: #48465b;
  --color-gun-powder-50: #f4f4ff;
  --color-gun-powder-100: #eae9f9;
  --color-gun-powder-200: #d6d5e8;
  --color-gun-powder-300: #c1bfd5;
  --color-gun-powder-400: #a3a1b8;
  --color-gun-powder-500: #89879e;
  --color-gun-powder-600: #6f6e84;
  --color-gun-powder-700: #5a586d;
  --color-gun-powder-800: #48465b;
  --color-gun-powder-900: #373646;
  --color-gun-powder-950: #23222d;
  --color-midnight-express: #2a2538;
  --color-midnight-express-50: #f6f3ff;
  --color-midnight-express-100: #ece9f8;
  --color-midnight-express-200: #d9d4e7;
  --color-midnight-express-300: #c2bdd3;
  --color-midnight-express-400: #a39eb5;
  --color-midnight-express-500: #8a849b;
  --color-midnight-express-600: #716c82;
  --color-midnight-express-700: #5c576b;
  --color-midnight-express-800: #4a4658;
  --color-midnight-express-900: #3c3848;
  --color-midnight-express-950: #2a2538;
}