Start generating

Ethereal Woods to Sanctum of Shadows color palette

376353Ethereal Woods7BB7AEMintnight985F34Gingerbread CrumbleC6C1E5Digital Lavender392B48Sanctum of Shadows
Open in generator Export PNG, PDF, ASE…

About this palette

Ethereal Woods to Sanctum of Shadows is a 5-color cool palette: #376353 (Ethereal Woods), #7BB7AE (Mintnight), #985F34 (Gingerbread Crumble), #C6C1E5 (Digital Lavender), #392B48 (Sanctum of Shadows). It mixes turquoise, brown, purple tones and feels cool overall. The strongest text pairing is #C6C1E5 on #392B48 with a contrast ratio of 7.54:1, and 2 of its 10 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Ethereal Woodsrgb(55, 99, 83)hsl(158, 29%, 30%)
Mintnightrgb(123, 183, 174)hsl(171, 29%, 60%)
Gingerbread Crumblergb(152, 95, 52)hsl(26, 49%, 40%)
Digital Lavenderrgb(198, 193, 229)hsl(248, 41%, 83%)
Sanctum of Shadowsrgb(57, 43, 72)hsl(269, 25%, 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.

  • Aa7.54:1 Very good#C6C1E5 on #392B48
  • Aa7.54:1 Very good#392B48 on #C6C1E5
  • Aa5.72:1 Good#7BB7AE on #392B48
  • Aa5.72:1 Good#392B48 on #7BB7AE
  • Aa3.96:1 Poor#376353 on #C6C1E5
  • Aa3.96:1 Poor#C6C1E5 on #376353
  • Aa3.02:1 Poor#985F34 on #C6C1E5
  • Aa3.02:1 Poor#C6C1E5 on #985F34

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Ethereal Woods to Sanctum of Shadows — https://swatchly.xyz/palette/376353-7bb7ae-985f34-c6c1e5-392b48 */
:root {
  --ethereal-woods: #376353;
  --mintnight: #7bb7ae;
  --gingerbread-crumble: #985f34;
  --digital-lavender: #c6c1e5;
  --sanctum-of-shadows: #392b48;
}

Tailwind CSS v4

/* Ethereal Woods to Sanctum of Shadows — https://swatchly.xyz/palette/376353-7bb7ae-985f34-c6c1e5-392b48 */
@theme {
  --color-ethereal-woods: #376353;
  --color-ethereal-woods-50: #e2fcf1;
  --color-ethereal-woods-100: #d6f3e7;
  --color-ethereal-woods-200: #bfe1d3;
  --color-ethereal-woods-300: #a5cdbd;
  --color-ethereal-woods-400: #83af9d;
  --color-ethereal-woods-500: #679482;
  --color-ethereal-woods-600: #4e7969;
  --color-ethereal-woods-700: #376353;
  --color-ethereal-woods-800: #294e40;
  --color-ethereal-woods-900: #1d3c31;
  --color-ethereal-woods-950: #0f261e;
  --color-mintnight: #7bb7ae;
  --color-mintnight-50: #e3fffa;
  --color-mintnight-100: #d5f8f2;
  --color-mintnight-200: #bde7e0;
  --color-mintnight-300: #a2d3cc;
  --color-mintnight-400: #7bb7ae;
  --color-mintnight-500: #5f9991;
  --color-mintnight-600: #427d75;
  --color-mintnight-700: #2d645d;
  --color-mintnight-800: #1c4e48;
  --color-mintnight-900: #113c37;
  --color-mintnight-950: #062521;
  --color-gingerbread-crumble: #985f34;
  --color-gingerbread-crumble-50: #fff2ea;
  --color-gingerbread-crumble-100: #ffe6d6;
  --color-gingerbread-crumble-200: #fdcdad;
  --color-gingerbread-crumble-300: #ebb690;
  --color-gingerbread-crumble-400: #cf956b;
  --color-gingerbread-crumble-500: #b4794e;
  --color-gingerbread-crumble-600: #985f34;
  --color-gingerbread-crumble-700: #7c4921;
  --color-gingerbread-crumble-800: #643713;
  --color-gingerbread-crumble-900: #4f2909;
  --color-gingerbread-crumble-950: #331803;
  --color-digital-lavender: #c6c1e5;
  --color-digital-lavender-50: #f8f7ff;
  --color-digital-lavender-100: #efecff;
  --color-digital-lavender-200: #dcd8f3;
  --color-digital-lavender-300: #c6c1e5;
  --color-digital-lavender-400: #a6a1c2;
  --color-digital-lavender-500: #8984a6;
  --color-digital-lavender-600: #6e6989;
  --color-digital-lavender-700: #57526f;
  --color-digital-lavender-800: #433f58;
  --color-digital-lavender-900: #332f44;
  --color-digital-lavender-950: #1f1d2c;
  --color-sanctum-of-shadows: #392b48;
  --color-sanctum-of-shadows-50: #f8f2ff;
  --color-sanctum-of-shadows-100: #f0e6fd;
  --color-sanctum-of-shadows-200: #ded1ed;
  --color-sanctum-of-shadows-300: #c8bad9;
  --color-sanctum-of-shadows-400: #a99abb;
  --color-sanctum-of-shadows-500: #8e7ea0;
  --color-sanctum-of-shadows-600: #736484;
  --color-sanctum-of-shadows-700: #5c4e6b;
  --color-sanctum-of-shadows-800: #483c55;
  --color-sanctum-of-shadows-900: #392b48;
  --color-sanctum-of-shadows-950: #221b2a;
}

Similar palettes