Spa to Espresso color palette

D2EDE9Spa A9BBA1Meadow Morn 7E9677Backyard 796989Nymph’s Delight 2A6965Deep Pool Teal 4F2D2BEspresso

Open in generator Export PNG, PDF, ASE…

About this palette

Spa to Espresso is a 6-color muted, cool palette: #D2EDE9 (Spa), #A9BBA1 (Meadow Morn), #7E9677 (Backyard), #796989 (Nymph’s Delight), #2A6965 (Deep Pool Teal), #4F2D2B (Espresso). It mixes gray, green, purple, turquoise, brown tones and feels cool overall. The strongest text pairing is #D2EDE9 on #4F2D2B with a contrast ratio of 9.77:1, and 3 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Spa	rgb(210, 237, 233)	hsl(171, 43%, 88%)
Meadow Morn	rgb(169, 187, 161)	hsl(102, 16%, 68%)
Backyard	rgb(126, 150, 119)	hsl(106, 13%, 53%)
Nymph’s Delight	rgb(121, 105, 137)	hsl(270, 13%, 47%)
Deep Pool Teal	rgb(42, 105, 101)	hsl(176, 43%, 29%)
Espresso	rgb(79, 45, 43)	hsl(3, 30%, 24%)

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.

Aa9.77:1 Very good#D2EDE9 on #4F2D2B
Aa9.77:1 Very good#4F2D2B on #D2EDE9
Aa5.92:1 Good#A9BBA1 on #4F2D2B
Aa5.92:1 Good#4F2D2B on #A9BBA1
Aa5.15:1 Good#D2EDE9 on #2A6965
Aa5.15:1 Good#2A6965 on #D2EDE9
Aa4.06:1 Poor#D2EDE9 on #796989
Aa4.06:1 Poor#796989 on #D2EDE9

Color blindness preview

CSS variables

/* Spa to Espresso — https://swatchly.xyz/palette/d2ede9-a9bba1-7e9677-796989-2a6965-4f2d2b */
:root {
  --spa: #d2ede9;
  --meadow-morn: #a9bba1;
  --backyard: #7e9677;
  --nymph-s-delight: #796989;
  --deep-pool-teal: #2a6965;
  --espresso: #4f2d2b;
}

Tailwind CSS v4

/* Spa to Espresso — https://swatchly.xyz/palette/d2ede9-a9bba1-7e9677-796989-2a6965-4f2d2b */
@theme {
  --color-spa: #d2ede9;
  --color-spa-50: #e5f5f3;
  --color-spa-100: #d2ede9;
  --color-spa-200: #c4d8d5;
  --color-spa-300: #adc3c0;
  --color-spa-400: #8da5a2;
  --color-spa-500: #728b87;
  --color-spa-600: #59716d;
  --color-spa-700: #455a57;
  --color-spa-800: #344744;
  --color-spa-900: #263734;
  --color-spa-950: #162220;
  --color-meadow-morn: #a9bba1;
  --color-meadow-morn-50: #e7f3e3;
  --color-meadow-morn-100: #dbe7d5;
  --color-meadow-morn-200: #c4d2bd;
  --color-meadow-morn-300: #a9bba1;
  --color-meadow-morn-400: #8d9e85;
  --color-meadow-morn-500: #74846c;
  --color-meadow-morn-600: #5c6c55;
  --color-meadow-morn-700: #485742;
  --color-meadow-morn-800: #394533;
  --color-meadow-morn-900: #2c3727;
  --color-meadow-morn-950: #1a2217;
  --color-backyard: #7e9677;
  --color-backyard-50: #edfce9;
  --color-backyard-100: #e4f4df;
  --color-backyard-200: #d0e2ca;
  --color-backyard-300: #b9ceb2;
  --color-backyard-400: #99b092;
  --color-backyard-500: #7e9677;
  --color-backyard-600: #637a5c;
  --color-backyard-700: #4c6146;
  --color-backyard-800: #394c34;
  --color-backyard-900: #2b3a26;
  --color-backyard-950: #192416;
  --color-nymph-s-delight: #796989;
  --color-nymph-s-delight-50: #f8f2ff;
  --color-nymph-s-delight-100: #f2e7fd;
  --color-nymph-s-delight-200: #e0d3ee;
  --color-nymph-s-delight-300: #cbbdda;
  --color-nymph-s-delight-400: #ad9dbe;
  --color-nymph-s-delight-500: #9383a4;
  --color-nymph-s-delight-600: #796989;
  --color-nymph-s-delight-700: #61526f;
  --color-nymph-s-delight-800: #4c3f58;
  --color-nymph-s-delight-900: #3a3045;
  --color-nymph-s-delight-950: #251d2c;
  --color-deep-pool-teal: #2a6965;
  --color-deep-pool-teal-50: #dbfdfa;
  --color-deep-pool-teal-100: #cef4f1;
  --color-deep-pool-teal-200: #b6e4e0;
  --color-deep-pool-teal-300: #9cd0cb;
  --color-deep-pool-teal-400: #78b3ae;
  --color-deep-pool-teal-500: #5b9994;
  --color-deep-pool-teal-600: #427f7b;
  --color-deep-pool-teal-700: #2a6965;
  --color-deep-pool-teal-800: #1d534f;
  --color-deep-pool-teal-900: #11403d;
  --color-deep-pool-teal-950: #062927;
  --color-espresso: #4f2d2b;
  --color-espresso-50: #fff2f0;
  --color-espresso-100: #ffe4e2;
  --color-espresso-200: #f0cecc;
  --color-espresso-300: #dcb7b4;
  --color-espresso-400: #bf9794;
  --color-espresso-500: #a57d79;
  --color-espresso-600: #8a6361;
  --color-espresso-700: #714f4c;
  --color-espresso-800: #5c3d3b;
  --color-espresso-900: #4f2d2b;
  --color-espresso-950: #311d1c;
}