Green Dynasty to What We Do in the Shadows color palette

About this palette

Green Dynasty to What We Do in the Shadows is a 6-color palette: #009D96 (Green Dynasty), #00DDDB (Fish Boy), #007474 (Prismarine), #F093A4 (Piggy), #872E4A (Blood Oath), #4D0020 (What We Do in the Shadows). It mixes turquoise, red tones and feels balanced overall. The strongest text pairing is #00DDDB on #4D0020 with a contrast ratio of 9.25:1, and 4 of its 15 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Green Dynastyrgb(0, 157, 150)hsl(177, 100%, 31%)
Fish Boyrgb(0, 221, 219)hsl(179, 100%, 43%)
Prismarinergb(0, 116, 116)hsl(180, 100%, 23%)
Piggyrgb(240, 147, 164)hsl(349, 76%, 76%)
Blood Oathrgb(135, 46, 74)hsl(341, 49%, 35%)
What We Do in the Shadowsrgb(77, 0, 32)hsl(335, 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.

  • Aa9.25:1 Very good#00DDDB on #4D0020
  • Aa9.25:1 Very good#4D0020 on #00DDDB
  • Aa7.04:1 Very good#F093A4 on #4D0020
  • Aa7.04:1 Very good#4D0020 on #F093A4
  • Aa4.91:1 Good#00DDDB on #872E4A
  • Aa4.91:1 Good#872E4A on #00DDDB
  • Aa4.69:1 Good#009D96 on #4D0020
  • Aa4.69:1 Good#4D0020 on #009D96

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Green Dynasty to What We Do in the Shadows — https://swatchly.xyz/palette/009d96-00dddb-007474-f093a4-872e4a-4d0020 */
:root {
  --green-dynasty: #009d96;
  --fish-boy: #00dddb;
  --prismarine: #007474;
  --piggy: #f093a4;
  --blood-oath: #872e4a;
  --what-we-do-in-the-shadows: #4d0020;
}

Tailwind CSS v4

/* Green Dynasty to What We Do in the Shadows — https://swatchly.xyz/palette/009d96-00dddb-007474-f093a4-872e4a-4d0020 */
@theme {
  --color-green-dynasty: #009d96;
  --color-green-dynasty-50: #d8fffb;
  --color-green-dynasty-100: #b9fbf5;
  --color-green-dynasty-200: #99eae4;
  --color-green-dynasty-300: #76d6cf;
  --color-green-dynasty-400: #43b8b1;
  --color-green-dynasty-500: #009d96;
  --color-green-dynasty-600: #007f79;
  --color-green-dynasty-700: #006460;
  --color-green-dynasty-800: #004e4b;
  --color-green-dynasty-900: #003c39;
  --color-green-dynasty-950: #002624;
  --color-fish-boy: #00dddb;
  --color-fish-boy-50: #d6fffd;
  --color-fish-boy-100: #a5fefc;
  --color-fish-boy-200: #7eeeeb;
  --color-fish-boy-300: #00dddb;
  --color-fish-boy-400: #00b9b8;
  --color-fish-boy-500: #009a99;
  --color-fish-boy-600: #007c7b;
  --color-fish-boy-700: #006362;
  --color-fish-boy-800: #004d4c;
  --color-fish-boy-900: #003b3b;
  --color-fish-boy-950: #002525;
  --color-prismarine: #007474;
  --color-prismarine-50: #d4fffe;
  --color-prismarine-100: #c0f6f5;
  --color-prismarine-200: #a2e3e2;
  --color-prismarine-300: #81cdcc;
  --color-prismarine-400: #56adac;
  --color-prismarine-500: #329090;
  --color-prismarine-600: #007474;
  --color-prismarine-700: #005c5c;
  --color-prismarine-800: #004848;
  --color-prismarine-900: #003838;
  --color-prismarine-950: #002323;
  --color-piggy: #f093a4;
  --color-piggy-50: #ffe6ea;
  --color-piggy-100: #ffd4db;
  --color-piggy-200: #ffb3bf;
  --color-piggy-300: #f093a4;
  --color-piggy-400: #d07788;
  --color-piggy-500: #b55e70;
  --color-piggy-600: #994759;
  --color-piggy-700: #7f3546;
  --color-piggy-800: #682736;
  --color-piggy-900: #551d2a;
  --color-piggy-950: #380f19;
  --color-blood-oath: #872e4a;
  --color-blood-oath-50: #fff1f4;
  --color-blood-oath-100: #ffe3e8;
  --color-blood-oath-200: #ffc5d1;
  --color-blood-oath-300: #faa3b7;
  --color-blood-oath-400: #dd7f97;
  --color-blood-oath-500: #c0617b;
  --color-blood-oath-600: #a14761;
  --color-blood-oath-700: #872e4a;
  --color-blood-oath-800: #6a2439;
  --color-blood-oath-900: #54182b;
  --color-blood-oath-950: #370c1a;
  --color-what-we-do-in-the-shadows: #4d0020;
  --color-what-we-do-in-the-shadows-50: #fff1f4;
  --color-what-we-do-in-the-shadows-100: #ffe3e8;
  --color-what-we-do-in-the-shadows-200: #ffc6d2;
  --color-what-we-do-in-the-shadows-300: #f5a8b9;
  --color-what-we-do-in-the-shadows-400: #d88599;
  --color-what-we-do-in-the-shadows-500: #be6a80;
  --color-what-we-do-in-the-shadows-600: #a15267;
  --color-what-we-do-in-the-shadows-700: #873e52;
  --color-what-we-do-in-the-shadows-800: #702f41;
  --color-what-we-do-in-the-shadows-900: #5c2334;
  --color-what-we-do-in-the-shadows-950: #4d0020;
}

Similar palettes