Stream Burble to Ethereal Espresso color palette

About this palette

Stream Burble to Ethereal Espresso is a 4-color muted, cool palette: #597E73 (Stream Burble), #AA99BD (Enchanted Lilac), #EFDDFF (Grape Taffy), #3B261A (Ethereal Espresso). It mixes turquoise, purple, brown tones and feels cool overall. The strongest text pairing is #EFDDFF on #3B261A with a contrast ratio of 11.13:1, and 2 of its 6 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Stream Burblergb(89, 126, 115)hsl(162, 17%, 42%)
Enchanted Lilacrgb(170, 153, 189)hsl(268, 21%, 67%)
Grape Taffyrgb(239, 221, 255)hsl(272, 100%, 93%)
Ethereal Espressorgb(59, 38, 26)hsl(22, 39%, 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.

  • Aa11.13:1 Very good#EFDDFF on #3B261A
  • Aa11.13:1 Very good#3B261A on #EFDDFF
  • Aa5.41:1 Good#AA99BD on #3B261A
  • Aa5.41:1 Good#3B261A on #AA99BD
  • Aa3.53:1 Poor#597E73 on #EFDDFF
  • Aa3.53:1 Poor#EFDDFF on #597E73
  • Aa3.15:1 Poor#597E73 on #3B261A
  • Aa3.15:1 Poor#3B261A on #597E73

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Stream Burble to Ethereal Espresso — https://swatchly.xyz/palette/597e73-aa99bd-efddff-3b261a */
:root {
  --stream-burble: #597e73;
  --enchanted-lilac: #aa99bd;
  --grape-taffy: #efddff;
  --ethereal-espresso: #3b261a;
}

Tailwind CSS v4

/* Stream Burble to Ethereal Espresso — https://swatchly.xyz/palette/597e73-aa99bd-efddff-3b261a */
@theme {
  --color-stream-burble: #597e73;
  --color-stream-burble-50: #e5fbf4;
  --color-stream-burble-100: #dbf3eb;
  --color-stream-burble-200: #c6e2d9;
  --color-stream-burble-300: #aecec4;
  --color-stream-burble-400: #8db1a6;
  --color-stream-burble-500: #72978c;
  --color-stream-burble-600: #597e73;
  --color-stream-burble-700: #43655b;
  --color-stream-burble-800: #314f46;
  --color-stream-burble-900: #233d36;
  --color-stream-burble-950: #132621;
  --color-enchanted-lilac: #aa99bd;
  --color-enchanted-lilac-50: #f8f2ff;
  --color-enchanted-lilac-100: #f1e6fe;
  --color-enchanted-lilac-200: #ded1ed;
  --color-enchanted-lilac-300: #c8bad9;
  --color-enchanted-lilac-400: #aa99bd;
  --color-enchanted-lilac-500: #8e7ea1;
  --color-enchanted-lilac-600: #746485;
  --color-enchanted-lilac-700: #5c4e6c;
  --color-enchanted-lilac-800: #493c56;
  --color-enchanted-lilac-900: #382d43;
  --color-enchanted-lilac-950: #231b2b;
  --color-grape-taffy: #efddff;
  --color-grape-taffy-50: #f6ecff;
  --color-grape-taffy-100: #efddff;
  --color-grape-taffy-200: #dacce6;
  --color-grape-taffy-300: #c5b6d3;
  --color-grape-taffy-400: #a797b6;
  --color-grape-taffy-500: #8d7d9b;
  --color-grape-taffy-600: #736481;
  --color-grape-taffy-700: #5d4e69;
  --color-grape-taffy-800: #493c53;
  --color-grape-taffy-900: #382e41;
  --color-grape-taffy-950: #231c2a;
  --color-ethereal-espresso: #3b261a;
  --color-ethereal-espresso-50: #fff2eb;
  --color-ethereal-espresso-100: #f9e7dd;
  --color-ethereal-espresso-200: #e8d3c7;
  --color-ethereal-espresso-300: #d3bbaf;
  --color-ethereal-espresso-400: #b49a8c;
  --color-ethereal-espresso-500: #977d6f;
  --color-ethereal-espresso-600: #7a6255;
  --color-ethereal-espresso-700: #604b3f;
  --color-ethereal-espresso-800: #49382e;
  --color-ethereal-espresso-900: #3b261a;
  --color-ethereal-espresso-950: #211712;
}

Similar palettes