Harem Silk to What We Do in the Shadows Color Palette

About this palette

Harem Silk to What We Do in the Shadows is a 4-color palette: #00637F (Harem Silk), #F7A8AA (Her Majesty), #00AF70 (Secret Garden), #461220 (What We Do in the Shadows). It mixes blue, pink, green, red tones and feels balanced overall. The strongest text pairing is #F7A8AA on #461220 with a contrast ratio of 8.14:1, and 2 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Harem Silk	rgb(0, 99, 127)	hsl(193, 100%, 25%)
Her Majesty	rgb(247, 168, 170)	hsl(358, 83%, 81%)
Secret Garden	rgb(0, 175, 112)	hsl(158, 100%, 34%)
What We Do in the Shadows	rgb(70, 18, 32)	hsl(344, 59%, 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.

Aa8.14:1 Very good#F7A8AA on #461220
Aa8.14:1 Very good#461220 on #F7A8AA
Aa5.39:1 Good#00AF70 on #461220
Aa5.39:1 Good#461220 on #00AF70
Aa3.60:1 Poor#00637F on #F7A8AA
Aa3.60:1 Poor#F7A8AA on #00637F

Color blindness preview

CSS variables

/* Harem Silk to What We Do in the Shadows — https://swatchly.xyz/palette/00637f-f7a8aa-00af70-461220 */
:root {
  --harem-silk: #00637f;
  --her-majesty: #f7a8aa;
  --secret-garden: #00af70;
  --what-we-do-in-the-shadows: #461220;
}

Tailwind CSS v4

/* Harem Silk to What We Do in the Shadows — https://swatchly.xyz/palette/00637f-f7a8aa-00af70-461220 */
@theme {
  --color-harem-silk: #00637f;
  --color-harem-silk-50: #e8f8ff;
  --color-harem-silk-100: #d1f1ff;
  --color-harem-silk-200: #aae2f9;
  --color-harem-silk-300: #8dcde8;
  --color-harem-silk-400: #66afcc;
  --color-harem-silk-500: #4694b2;
  --color-harem-silk-600: #297a96;
  --color-harem-silk-700: #00637f;
  --color-harem-silk-800: #004d64;
  --color-harem-silk-900: #003c4e;
  --color-harem-silk-950: #002532;
  --color-her-majesty: #f7a8aa;
  --color-her-majesty-50: #fff1f1;
  --color-her-majesty-100: #ffe3e3;
  --color-her-majesty-200: #ffc7c7;
  --color-her-majesty-300: #f7a8aa;
  --color-her-majesty-400: #d38a8c;
  --color-her-majesty-500: #b76e71;
  --color-her-majesty-600: #9a5458;
  --color-her-majesty-700: #7e3f43;
  --color-her-majesty-800: #662f32;
  --color-her-majesty-900: #502225;
  --color-her-majesty-950: #341316;
  --color-secret-garden: #00af70;
  --color-secret-garden-50: #e6fff0;
  --color-secret-garden-100: #caffdf;
  --color-secret-garden-200: #9ff5c5;
  --color-secret-garden-300: #7de3ad;
  --color-secret-garden-400: #4ac88c;
  --color-secret-garden-500: #00af70;
  --color-secret-garden-600: #008d59;
  --color-secret-garden-700: #007046;
  --color-secret-garden-800: #005735;
  --color-secret-garden-900: #004227;
  --color-secret-garden-950: #002917;
  --color-what-we-do-in-the-shadows: #461220;
  --color-what-we-do-in-the-shadows-50: #fff1f3;
  --color-what-we-do-in-the-shadows-100: #ffe3e7;
  --color-what-we-do-in-the-shadows-200: #fbc8d0;
  --color-what-we-do-in-the-shadows-300: #e9afb9;
  --color-what-we-do-in-the-shadows-400: #cc8e98;
  --color-what-we-do-in-the-shadows-500: #b2737f;
  --color-what-we-do-in-the-shadows-600: #975b66;
  --color-what-we-do-in-the-shadows-700: #7e4752;
  --color-what-we-do-in-the-shadows-800: #683841;
  --color-what-we-do-in-the-shadows-900: #562b34;
  --color-what-we-do-in-the-shadows-950: #461220;
}