Après-Ski to Palm Leaf Color Palette

About this palette

Après-Ski to Palm Leaf is a 5-color muted palette: #CBD3E6 (Après-Ski), #A0A893 (Rooftop Garden), #A47694 (Drama Queen), #585A81 (Wizard), #404B28 (Palm Leaf). It mixes gray, pink, purple, green tones and feels cool overall. The strongest text pairing is #CBD3E6 on #404B28 with a contrast ratio of 6.21:1, and 1 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Après-Ski	rgb(203, 211, 230)	hsl(222, 35%, 85%)
Rooftop Garden	rgb(160, 168, 147)	hsl(83, 11%, 62%)
Drama Queen	rgb(164, 118, 148)	hsl(321, 20%, 55%)
Wizard	rgb(88, 90, 129)	hsl(237, 19%, 43%)
Palm Leaf	rgb(64, 75, 40)	hsl(79, 30%, 23%)

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.

Aa6.21:1 Good#CBD3E6 on #404B28
Aa6.21:1 Good#404B28 on #CBD3E6
Aa4.38:1 Poor#CBD3E6 on #585A81
Aa4.38:1 Poor#585A81 on #CBD3E6
Aa3.78:1 Poor#A0A893 on #404B28
Aa3.78:1 Poor#404B28 on #A0A893

Color blindness preview

CSS variables

/* Après-Ski to Palm Leaf — https://swatchly.xyz/palette/cbd3e6-a0a893-a47694-585a81-404b28 */
:root {
  --apr-s-ski: #cbd3e6;
  --rooftop-garden: #a0a893;
  --drama-queen: #a47694;
  --wizard: #585a81;
  --palm-leaf: #404b28;
}

Tailwind CSS v4

/* Après-Ski to Palm Leaf — https://swatchly.xyz/palette/cbd3e6-a0a893-a47694-585a81-404b28 */
@theme {
  --color-apr-s-ski: #cbd3e6;
  --color-apr-s-ski-50: #edf2fd;
  --color-apr-s-ski-100: #e2e7f4;
  --color-apr-s-ski-200: #cbd3e6;
  --color-apr-s-ski-300: #b6bdcd;
  --color-apr-s-ski-400: #979fb0;
  --color-apr-s-ski-500: #7d8495;
  --color-apr-s-ski-600: #636a7b;
  --color-apr-s-ski-700: #4e5463;
  --color-apr-s-ski-800: #3d424f;
  --color-apr-s-ski-900: #2e333e;
  --color-apr-s-ski-950: #1c1f27;
  --color-rooftop-garden: #a0a893;
  --color-rooftop-garden-50: #f4f8ec;
  --color-rooftop-garden-100: #eaefe2;
  --color-rooftop-garden-200: #d6dccc;
  --color-rooftop-garden-300: #c0c7b4;
  --color-rooftop-garden-400: #a0a893;
  --color-rooftop-garden-500: #848c78;
  --color-rooftop-garden-600: #6a715e;
  --color-rooftop-garden-700: #535a48;
  --color-rooftop-garden-800: #404636;
  --color-rooftop-garden-900: #313528;
  --color-rooftop-garden-950: #1d2118;
  --color-drama-queen: #a47694;
  --color-drama-queen-50: #fff0f9;
  --color-drama-queen-100: #ffe1f4;
  --color-drama-queen-200: #f0cbe3;
  --color-drama-queen-300: #ddb3cd;
  --color-drama-queen-400: #bf92af;
  --color-drama-queen-500: #a47694;
  --color-drama-queen-600: #885c79;
  --color-drama-queen-700: #6e4761;
  --color-drama-queen-800: #58364c;
  --color-drama-queen-900: #45283b;
  --color-drama-queen-950: #2c1725;
  --color-wizard: #585a81;
  --color-wizard-50: #f3f4ff;
  --color-wizard-100: #e7e9ff;
  --color-wizard-200: #d3d6f8;
  --color-wizard-300: #bec1e6;
  --color-wizard-400: #a0a3cc;
  --color-wizard-500: #8688b2;
  --color-wizard-600: #6d6f98;
  --color-wizard-700: #585a81;
  --color-wizard-800: #444667;
  --color-wizard-900: #343551;
  --color-wizard-950: #202135;
  --color-palm-leaf: #404b28;
  --color-palm-leaf-50: #f1f9e2;
  --color-palm-leaf-100: #e6efd6;
  --color-palm-leaf-200: #d2ddbf;
  --color-palm-leaf-300: #bbc7a5;
  --color-palm-leaf-400: #9ca984;
  --color-palm-leaf-500: #818e68;
  --color-palm-leaf-600: #687450;
  --color-palm-leaf-700: #535d3c;
  --color-palm-leaf-800: #404b28;
  --color-palm-leaf-900: #313920;
  --color-palm-leaf-950: #1e2412;
}