Start generating

Bath Water to What We Do in the Shadows color palette

8FEFEBBath WaterFF8998Tulip00AFACTeal Me No LiesB53B53Merlot Magic00494CTropical Forest4B0018What We Do in the Shadows
Open in generator Export PNG, PDF, ASE…

About this palette

Bath Water to What We Do in the Shadows is a 6-color palette: #8FEFEB (Bath Water), #FF8998 (Tulip), #00AFAC (Teal Me No Lies), #B53B53 (Merlot Magic), #00494C (Tropical Forest), #4B0018 (What We Do in the Shadows). It mixes turquoise, red, brown tones and feels balanced overall. The strongest text pairing is #8FEFEB on #4B0018 with a contrast ratio of 11.97:1, and 5 of its 15 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Bath Waterrgb(143, 239, 235)hsl(177, 75%, 75%)
Tuliprgb(255, 137, 152)hsl(352, 100%, 77%)
Teal Me No Liesrgb(0, 175, 172)hsl(179, 100%, 34%)
Merlot Magicrgb(181, 59, 83)hsl(348, 51%, 47%)
Tropical Forestrgb(0, 73, 76)hsl(182, 100%, 15%)
What We Do in the Shadowsrgb(75, 0, 24)hsl(341, 100%, 15%)

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.97:1 Very good#8FEFEB on #4B0018
  • Aa11.97:1 Very good#4B0018 on #8FEFEB
  • Aa7.64:1 Very good#8FEFEB on #00494C
  • Aa7.64:1 Very good#00494C on #8FEFEB
  • Aa7.07:1 Very good#FF8998 on #4B0018
  • Aa7.07:1 Very good#4B0018 on #FF8998
  • Aa5.89:1 Good#00AFAC on #4B0018
  • Aa5.89:1 Good#4B0018 on #00AFAC

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Bath Water to What We Do in the Shadows — https://swatchly.xyz/palette/8fefeb-ff8998-00afac-b53b53-00494c-4b0018 */
:root {
  --bath-water: #8fefeb;
  --tulip: #ff8998;
  --teal-me-no-lies: #00afac;
  --merlot-magic: #b53b53;
  --tropical-forest: #00494c;
  --what-we-do-in-the-shadows: #4b0018;
}

Tailwind CSS v4

/* Bath Water to What We Do in the Shadows — https://swatchly.xyz/palette/8fefeb-ff8998-00afac-b53b53-00494c-4b0018 */
@theme {
  --color-bath-water: #8fefeb;
  --color-bath-water-50: #e1fffd;
  --color-bath-water-100: #c5fbf8;
  --color-bath-water-200: #8fefeb;
  --color-bath-water-300: #87d4d1;
  --color-bath-water-400: #5ab5b2;
  --color-bath-water-500: #349996;
  --color-bath-water-600: #087d7a;
  --color-bath-water-700: #006361;
  --color-bath-water-800: #004d4b;
  --color-bath-water-900: #003b3a;
  --color-bath-water-950: #002524;
  --color-tulip: #ff8998;
  --color-tulip-50: #ffe6e8;
  --color-tulip-100: #ffd5d8;
  --color-tulip-200: #ffb3ba;
  --color-tulip-300: #ff8998;
  --color-tulip-400: #de6d7d;
  --color-tulip-500: #c25364;
  --color-tulip-600: #a53b4e;
  --color-tulip-700: #8a293c;
  --color-tulip-800: #711c2e;
  --color-tulip-900: #5d1223;
  --color-tulip-950: #3d0714;
  --color-teal-me-no-lies: #00afac;
  --color-teal-me-no-lies-50: #c6fffc;
  --color-teal-me-no-lies-100: #aaf7f4;
  --color-teal-me-no-lies-200: #86e5e1;
  --color-teal-me-no-lies-300: #5ccecb;
  --color-teal-me-no-lies-400: #00afac;
  --color-teal-me-no-lies-500: #00928f;
  --color-teal-me-no-lies-600: #007674;
  --color-teal-me-no-lies-700: #005e5c;
  --color-teal-me-no-lies-800: #004a49;
  --color-teal-me-no-lies-900: #003a39;
  --color-teal-me-no-lies-950: #002524;
  --color-merlot-magic: #b53b53;
  --color-merlot-magic-50: #fff1f2;
  --color-merlot-magic-100: #ffe4e6;
  --color-merlot-magic-200: #ffc7cc;
  --color-merlot-magic-300: #ffa4ae;
  --color-merlot-magic-400: #f07688;
  --color-merlot-magic-500: #d4586c;
  --color-merlot-magic-600: #b53b53;
  --color-merlot-magic-700: #95273f;
  --color-merlot-magic-800: #79162f;
  --color-merlot-magic-900: #610b22;
  --color-merlot-magic-950: #400313;
  --color-tropical-forest: #00494c;
  --color-tropical-forest-50: #dcfdfe;
  --color-tropical-forest-100: #cef4f5;
  --color-tropical-forest-200: #b5e1e3;
  --color-tropical-forest-300: #98cbce;
  --color-tropical-forest-400: #72acaf;
  --color-tropical-forest-500: #549093;
  --color-tropical-forest-600: #3a7477;
  --color-tropical-forest-700: #255c5f;
  --color-tropical-forest-800: #00494c;
  --color-tropical-forest-900: #0d3739;
  --color-tropical-forest-950: #052224;
  --color-what-we-do-in-the-shadows: #4b0018;
  --color-what-we-do-in-the-shadows-50: #fff1f3;
  --color-what-we-do-in-the-shadows-100: #ffe3e6;
  --color-what-we-do-in-the-shadows-200: #ffc7cd;
  --color-what-we-do-in-the-shadows-300: #f5a9b3;
  --color-what-we-do-in-the-shadows-400: #d88692;
  --color-what-we-do-in-the-shadows-500: #bd6b78;
  --color-what-we-do-in-the-shadows-600: #a1525f;
  --color-what-we-do-in-the-shadows-700: #863e4b;
  --color-what-we-do-in-the-shadows-800: #6e2f3a;
  --color-what-we-do-in-the-shadows-900: #5a232d;
  --color-what-we-do-in-the-shadows-950: #4b0018;
}

Similar palettes