Glossy Black to Harem Silk color palette

100021Glossy Black 002C26Swamp Thing 2E2848Midnight Masquerade 304850Little Mermaid 00617FHarem Silk

Open in generator Export PNG, PDF, ASE…

About this palette

Glossy Black to Harem Silk is a 5-color dark, cool palette: #100021 (Glossy Black), #002C26 (Swamp Thing), #2E2848 (Midnight Masquerade), #304850 (Little Mermaid), #00617F (Harem Silk). It mixes purple, turquoise, gray, blue tones and feels cool overall. The strongest text pairing is #100021 on #00617F with a contrast ratio of 2.89:1, and 0 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Glossy Black	rgb(16, 0, 33)	hsl(269, 100%, 6%)
Swamp Thing	rgb(0, 44, 38)	hsl(172, 100%, 9%)
Midnight Masquerade	rgb(46, 40, 72)	hsl(251, 29%, 22%)
Little Mermaid	rgb(48, 72, 80)	hsl(195, 25%, 25%)
Harem Silk	rgb(0, 97, 127)	hsl(194, 100%, 25%)

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.

Color blindness preview

CSS variables

/* Glossy Black to Harem Silk — https://swatchly.xyz/palette/100021-002c26-2e2848-304850-00617f */
:root {
  --glossy-black: #100021;
  --swamp-thing: #002c26;
  --midnight-masquerade: #2e2848;
  --little-mermaid: #304850;
  --harem-silk: #00617f;
}

Tailwind CSS v4

/* Glossy Black to Harem Silk — https://swatchly.xyz/palette/100021-002c26-2e2848-304850-00617f */
@theme {
  --color-glossy-black: #100021;
  --color-glossy-black-50: #f7f3ff;
  --color-glossy-black-100: #f0e6ff;
  --color-glossy-black-200: #dfcff6;
  --color-glossy-black-300: #c9b8e3;
  --color-glossy-black-400: #aa97c6;
  --color-glossy-black-500: #8a77a6;
  --color-glossy-black-600: #6b5884;
  --color-glossy-black-700: #4f3f64;
  --color-glossy-black-800: #372a47;
  --color-glossy-black-900: #23192f;
  --color-glossy-black-950: #100021;
  --color-swamp-thing: #002c26;
  --color-swamp-thing-50: #e3fbf6;
  --color-swamp-thing-100: #d7f2ec;
  --color-swamp-thing-200: #bfe0d9;
  --color-swamp-thing-300: #a5cac2;
  --color-swamp-thing-400: #83aba3;
  --color-swamp-thing-500: #689189;
  --color-swamp-thing-600: #4f776f;
  --color-swamp-thing-700: #3b615a;
  --color-swamp-thing-800: #2c4e48;
  --color-swamp-thing-900: #213e39;
  --color-swamp-thing-950: #002c26;
  --color-midnight-masquerade: #2e2848;
  --color-midnight-masquerade-50: #f5f4ff;
  --color-midnight-masquerade-100: #ebe8ff;
  --color-midnight-masquerade-200: #d7d3f2;
  --color-midnight-masquerade-300: #c0bcdf;
  --color-midnight-masquerade-400: #a09bc1;
  --color-midnight-masquerade-500: #847ea4;
  --color-midnight-masquerade-600: #696387;
  --color-midnight-masquerade-700: #514d6c;
  --color-midnight-masquerade-800: #3e3a55;
  --color-midnight-masquerade-900: #2e2848;
  --color-midnight-masquerade-950: #1b1928;
  --color-little-mermaid: #304850;
  --color-little-mermaid-50: #e9f8fe;
  --color-little-mermaid-100: #ddeff5;
  --color-little-mermaid-200: #c7dce3;
  --color-little-mermaid-300: #afc6ce;
  --color-little-mermaid-400: #8da7b0;
  --color-little-mermaid-500: #728c95;
  --color-little-mermaid-600: #59717a;
  --color-little-mermaid-700: #445b62;
  --color-little-mermaid-800: #304850;
  --color-little-mermaid-900: #26373d;
  --color-little-mermaid-950: #162226;
  --color-harem-silk: #00617f;
  --color-harem-silk-50: #e9f8ff;
  --color-harem-silk-100: #d3f1ff;
  --color-harem-silk-200: #aae1fb;
  --color-harem-silk-300: #8dcce9;
  --color-harem-silk-400: #66aecd;
  --color-harem-silk-500: #4693b3;
  --color-harem-silk-600: #297896;
  --color-harem-silk-700: #00617f;
  --color-harem-silk-800: #004c64;
  --color-harem-silk-900: #003a4e;
  --color-harem-silk-950: #002532;
}