Après-Ski to Haiti Color Palette

About this palette

Après-Ski to Haiti is a 5-color muted, earthy, vintage, gradient palette: #D2D6E7 (Après-Ski), #B4A073 (Curry Sauce), #928058 (Mushroom Forest), #4B5F4B (Muddy Olive), #2E2531 (Haiti). It mixes gray, yellow, green tones and feels warm overall. The strongest text pairing is #D2D6E7 on #2E2531 with a contrast ratio of 10.18:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Après-Ski	rgb(210, 214, 231)	hsl(229, 30%, 86%)
Curry Sauce	rgb(180, 160, 115)	hsl(42, 30%, 58%)
Mushroom Forest	rgb(146, 128, 88)	hsl(41, 25%, 46%)
Muddy Olive	rgb(75, 95, 75)	hsl(120, 12%, 33%)
Haiti	rgb(46, 37, 49)	hsl(285, 14%, 17%)

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.18:1 Very good#D2D6E7 on #2E2531
Aa10.18:1 Very good#2E2531 on #D2D6E7
Aa5.77:1 Good#B4A073 on #2E2531
Aa5.77:1 Good#2E2531 on #B4A073
Aa4.78:1 Good#D2D6E7 on #4B5F4B
Aa4.78:1 Good#4B5F4B on #D2D6E7
Aa3.82:1 Poor#928058 on #2E2531
Aa3.82:1 Poor#2E2531 on #928058

Color blindness preview

CSS variables

/* Après-Ski to Haiti — https://swatchly.xyz/palette/d2d6e7-b4a073-928058-4b5f4b-2e2531 */
:root {
  --apr-s-ski: #d2d6e7;
  --curry-sauce: #b4a073;
  --mushroom-forest: #928058;
  --muddy-olive: #4b5f4b;
  --haiti: #2e2531;
}

Tailwind CSS v4

/* Après-Ski to Haiti — https://swatchly.xyz/palette/d2d6e7-b4a073-928058-4b5f4b-2e2531 */
@theme {
  --color-apr-s-ski: #d2d6e7;
  --color-apr-s-ski-50: #f2f4fe;
  --color-apr-s-ski-100: #e8eaf5;
  --color-apr-s-ski-200: #d2d6e7;
  --color-apr-s-ski-300: #bcc0ce;
  --color-apr-s-ski-400: #9da0b0;
  --color-apr-s-ski-500: #818595;
  --color-apr-s-ski-600: #676b79;
  --color-apr-s-ski-700: #515462;
  --color-apr-s-ski-800: #3f424d;
  --color-apr-s-ski-900: #30323c;
  --color-apr-s-ski-950: #1d1f26;
  --color-curry-sauce: #b4a073;
  --color-curry-sauce-50: #fff5dd;
  --color-curry-sauce-100: #f7eace;
  --color-curry-sauce-200: #e6d7b4;
  --color-curry-sauce-300: #d1c099;
  --color-curry-sauce-400: #b4a073;
  --color-curry-sauce-500: #988458;
  --color-curry-sauce-600: #7c6a3f;
  --color-curry-sauce-700: #64532c;
  --color-curry-sauce-800: #4f411e;
  --color-curry-sauce-900: #3e3113;
  --color-curry-sauce-950: #271e08;
  --color-mushroom-forest: #928058;
  --color-mushroom-forest-50: #fef3dc;
  --color-mushroom-forest-100: #f5e9ce;
  --color-mushroom-forest-200: #e2d4b4;
  --color-mushroom-forest-300: #cdbc98;
  --color-mushroom-forest-400: #ae9c75;
  --color-mushroom-forest-500: #928058;
  --color-mushroom-forest-600: #776640;
  --color-mushroom-forest-700: #60512e;
  --color-mushroom-forest-800: #4c3f20;
  --color-mushroom-forest-900: #3c3016;
  --color-mushroom-forest-950: #261e0a;
  --color-muddy-olive: #4b5f4b;
  --color-muddy-olive-50: #ecf9ec;
  --color-muddy-olive-100: #e1f0e1;
  --color-muddy-olive-200: #cddecc;
  --color-muddy-olive-300: #b5c8b5;
  --color-muddy-olive-400: #95aa95;
  --color-muddy-olive-500: #7a8f7a;
  --color-muddy-olive-600: #617561;
  --color-muddy-olive-700: #4b5f4b;
  --color-muddy-olive-800: #3a4a3a;
  --color-muddy-olive-900: #2b392b;
  --color-muddy-olive-950: #1a241a;
  --color-haiti: #2e2531;
  --color-haiti-50: #f9f2fb;
  --color-haiti-100: #f0e8f2;
  --color-haiti-200: #ddd4e0;
  --color-haiti-300: #c7bdca;
  --color-haiti-400: #a89dac;
  --color-haiti-500: #8f8492;
  --color-haiti-600: #766b79;
  --color-haiti-700: #605764;
  --color-haiti-800: #4e4651;
  --color-haiti-900: #403842;
  --color-haiti-950: #2e2531;
}