Ethereal Espresso to Frost Fairy Color Palette

About this palette

Ethereal Espresso to Frost Fairy is a 5-color cool palette: #3A251E (Ethereal Espresso), #504776 (Drifting Violet), #009076 (Pool Table), #80B397 (Beau Monde), #BFC7F4 (Frost Fairy). It mixes gray, purple, turquoise, green tones and feels cool overall. The strongest text pairing is #3A251E on #BFC7F4 with a contrast ratio of 8.67:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Ethereal Espresso	rgb(58, 37, 30)	hsl(15, 32%, 17%)
Drifting Violet	rgb(80, 71, 118)	hsl(251, 25%, 37%)
Pool Table	rgb(0, 144, 118)	hsl(169, 100%, 28%)
Beau Monde	rgb(128, 179, 151)	hsl(147, 25%, 60%)
Frost Fairy	rgb(191, 199, 244)	hsl(231, 71%, 85%)

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.

Aa8.67:1 Very good#3A251E on #BFC7F4
Aa8.67:1 Very good#BFC7F4 on #3A251E
Aa6.02:1 Good#3A251E on #80B397
Aa6.02:1 Good#80B397 on #3A251E
Aa5.07:1 Good#504776 on #BFC7F4
Aa5.07:1 Good#BFC7F4 on #504776
Aa3.59:1 Poor#3A251E on #009076
Aa3.59:1 Poor#009076 on #3A251E

Color blindness preview

CSS variables

/* Ethereal Espresso to Frost Fairy — https://swatchly.xyz/palette/3a251e-504776-009076-80b397-bfc7f4 */
:root {
  --ethereal-espresso: #3a251e;
  --drifting-violet: #504776;
  --pool-table: #009076;
  --beau-monde: #80b397;
  --frost-fairy: #bfc7f4;
}

Tailwind CSS v4

/* Ethereal Espresso to Frost Fairy — https://swatchly.xyz/palette/3a251e-504776-009076-80b397-bfc7f4 */
@theme {
  --color-ethereal-espresso: #3a251e;
  --color-ethereal-espresso-50: #fff2ee;
  --color-ethereal-espresso-100: #f9e7e1;
  --color-ethereal-espresso-200: #e7d2cb;
  --color-ethereal-espresso-300: #d3bbb3;
  --color-ethereal-espresso-400: #b39991;
  --color-ethereal-espresso-500: #967c74;
  --color-ethereal-espresso-600: #796159;
  --color-ethereal-espresso-700: #5f4a43;
  --color-ethereal-espresso-800: #493731;
  --color-ethereal-espresso-900: #3a251e;
  --color-ethereal-espresso-950: #201613;
  --color-drifting-violet: #504776;
  --color-drifting-violet-50: #f5f3ff;
  --color-drifting-violet-100: #ebe8ff;
  --color-drifting-violet-200: #d6d0fa;
  --color-drifting-violet-300: #bfb8e7;
  --color-drifting-violet-400: #9e96c9;
  --color-drifting-violet-500: #827aad;
  --color-drifting-violet-600: #675f8e;
  --color-drifting-violet-700: #504776;
  --color-drifting-violet-800: #3e375c;
  --color-drifting-violet-900: #302a49;
  --color-drifting-violet-950: #1d192f;
  --color-pool-table: #009076;
  --color-pool-table-50: #d1fff0;
  --color-pool-table-100: #b5f7e3;
  --color-pool-table-200: #94e4cd;
  --color-pool-table-300: #6fceb4;
  --color-pool-table-400: #3eae93;
  --color-pool-table-500: #009076;
  --color-pool-table-600: #00745f;
  --color-pool-table-700: #005d4b;
  --color-pool-table-800: #00493b;
  --color-pool-table-900: #00392d;
  --color-pool-table-950: #00241c;
  --color-beau-monde: #80b397;
  --color-beau-monde-50: #e3ffee;
  --color-beau-monde-100: #d7f6e4;
  --color-beau-monde-200: #bfe5cf;
  --color-beau-monde-300: #a5d0b8;
  --color-beau-monde-400: #80b397;
  --color-beau-monde-500: #64967b;
  --color-beau-monde-600: #4a7a61;
  --color-beau-monde-700: #35624b;
  --color-beau-monde-800: #254d39;
  --color-beau-monde-900: #193b2a;
  --color-beau-monde-950: #0c2519;
  --color-frost-fairy: #bfc7f4;
  --color-frost-fairy-50: #f8f9ff;
  --color-frost-fairy-100: #eef1ff;
  --color-frost-fairy-200: #d7ddfd;
  --color-frost-fairy-300: #bfc7f4;
  --color-frost-fairy-400: #9fa6cf;
  --color-frost-fairy-500: #8289b3;
  --color-frost-fairy-600: #666d95;
  --color-frost-fairy-700: #4f5579;
  --color-frost-fairy-800: #3c4160;
  --color-frost-fairy-900: #2d304b;
  --color-frost-fairy-950: #1b1e30;
}