What We Do in the Shadows to Water color palette

4F082CWhat We Do in the Shadows 4E5512Zen Garden Olive 008AB1Corfu Waters BFC58DKiss a Frog DCF1FFWater

Open in generator Export PNG, PDF, ASE…

About this palette

What We Do in the Shadows to Water is a 5-color vintage palette: #4F082C (What We Do in the Shadows), #4E5512 (Zen Garden Olive), #008AB1 (Corfu Waters), #BFC58D (Kiss a Frog), #DCF1FF (Water). It mixes red, green, blue, white tones and feels balanced overall. The strongest text pairing is #4F082C on #DCF1FF with a contrast ratio of 12.87:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
What We Do in the Shadows	rgb(79, 8, 44)	hsl(330, 82%, 17%)
Zen Garden Olive	rgb(78, 85, 18)	hsl(66, 65%, 20%)
Corfu Waters	rgb(0, 138, 177)	hsl(193, 100%, 35%)
Kiss a Frog	rgb(191, 197, 141)	hsl(66, 33%, 66%)
Water	rgb(220, 241, 255)	hsl(204, 100%, 93%)

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.

Aa12.87:1 Super#4F082C on #DCF1FF
Aa12.87:1 Super#DCF1FF on #4F082C
Aa8.26:1 Very good#4F082C on #BFC58D
Aa8.26:1 Very good#BFC58D on #4F082C
Aa6.87:1 Good#4E5512 on #DCF1FF
Aa6.87:1 Good#DCF1FF on #4E5512
Aa4.40:1 Poor#4E5512 on #BFC58D
Aa4.40:1 Poor#BFC58D on #4E5512

Color blindness preview

CSS variables

/* What We Do in the Shadows to Water — https://swatchly.xyz/palette/4f082c-4e5512-008ab1-bfc58d-dcf1ff */
:root {
  --what-we-do-in-the-shadows: #4f082c;
  --zen-garden-olive: #4e5512;
  --corfu-waters: #008ab1;
  --kiss-a-frog: #bfc58d;
  --water: #dcf1ff;
}

Tailwind CSS v4

/* What We Do in the Shadows to Water — https://swatchly.xyz/palette/4f082c-4e5512-008ab1-bfc58d-dcf1ff */
@theme {
  --color-what-we-do-in-the-shadows: #4f082c;
  --color-what-we-do-in-the-shadows-50: #fff1f5;
  --color-what-we-do-in-the-shadows-100: #ffe2ec;
  --color-what-we-do-in-the-shadows-200: #ffc5d9;
  --color-what-we-do-in-the-shadows-300: #f1a9c3;
  --color-what-we-do-in-the-shadows-400: #d384a2;
  --color-what-we-do-in-the-shadows-500: #b46785;
  --color-what-we-do-in-the-shadows-600: #944c69;
  --color-what-we-do-in-the-shadows-700: #773651;
  --color-what-we-do-in-the-shadows-800: #5c263c;
  --color-what-we-do-in-the-shadows-900: #4f082c;
  --color-what-we-do-in-the-shadows-950: #2b0d19;
  --color-zen-garden-olive: #4e5512;
  --color-zen-garden-olive-50: #f3fad5;
  --color-zen-garden-olive-100: #e9f0c7;
  --color-zen-garden-olive-200: #d4dcab;
  --color-zen-garden-olive-300: #bcc58d;
  --color-zen-garden-olive-400: #9ca567;
  --color-zen-garden-olive-500: #808949;
  --color-zen-garden-olive-600: #656d2f;
  --color-zen-garden-olive-700: #4e5512;
  --color-zen-garden-olive-800: #3d420f;
  --color-zen-garden-olive-900: #2e3307;
  --color-zen-garden-olive-950: #1c1f02;
  --color-corfu-waters: #008ab1;
  --color-corfu-waters-50: #e5f7ff;
  --color-corfu-waters-100: #caefff;
  --color-corfu-waters-200: #93dfff;
  --color-corfu-waters-300: #6fc8ec;
  --color-corfu-waters-400: #3da7ce;
  --color-corfu-waters-500: #008ab1;
  --color-corfu-waters-600: #006f8f;
  --color-corfu-waters-700: #005873;
  --color-corfu-waters-800: #00455b;
  --color-corfu-waters-900: #003647;
  --color-corfu-waters-950: #00222f;
  --color-kiss-a-frog: #bfc58d;
  --color-kiss-a-frog-50: #f4f8d8;
  --color-kiss-a-frog-100: #eaeecb;
  --color-kiss-a-frog-200: #d6dbb1;
  --color-kiss-a-frog-300: #bfc58d;
  --color-kiss-a-frog-400: #a0a571;
  --color-kiss-a-frog-500: #858a55;
  --color-kiss-a-frog-600: #6b703c;
  --color-kiss-a-frog-700: #555929;
  --color-kiss-a-frog-800: #42461b;
  --color-kiss-a-frog-900: #333611;
  --color-kiss-a-frog-950: #1f2107;
  --color-water: #dcf1ff;
  --color-water-50: #eff9ff;
  --color-water-100: #dcf1ff;
  --color-water-200: #cddce6;
  --color-water-300: #b4c5d1;
  --color-water-400: #93a6b2;
  --color-water-500: #778a97;
  --color-water-600: #5d6f7b;
  --color-water-700: #475863;
  --color-water-800: #36454e;
  --color-water-900: #29353d;
  --color-water-950: #182126;
}