Start generating

Black Knight to Harem Silk color palette

001017Black Knight002914Haunted Forest003A2CPitch-Black Forests195E19Woodland Wonder006388Harem Silk
Open in generator Export PNG, PDF, ASE…

About this palette

Black Knight to Harem Silk is a 5-color dark, cool, gradient palette: #001017 (Black Knight), #002914 (Haunted Forest), #003A2C (Pitch-Black Forests), #195E19 (Woodland Wonder), #006388 (Harem Silk). It mixes black, green, turquoise, blue tones and feels cool overall. The strongest text pairing is #001017 on #006388 with a contrast ratio of 2.89:1, and 0 of its 10 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Black Knightrgb(0, 16, 23)hsl(198, 100%, 5%)
Haunted Forestrgb(0, 41, 20)hsl(149, 100%, 8%)
Pitch-Black Forestsrgb(0, 58, 44)hsl(166, 100%, 11%)
Woodland Wonderrgb(25, 94, 25)hsl(120, 58%, 23%)
Harem Silkrgb(0, 99, 136)hsl(196, 100%, 27%)

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

    • Protanopia
    • Deuteranopia
    • Tritanopia
    • Achromatopsia
    • Dog vision

    CSS variables

    /* Black Knight to Harem Silk — https://swatchly.xyz/palette/001017-002914-003a2c-195e19-006388 */
:root {
  --black-knight: #001017;
  --haunted-forest: #002914;
  --pitch-black-forests: #003a2c;
  --woodland-wonder: #195e19;
  --harem-silk: #006388;
}

    Tailwind CSS v4

    /* Black Knight to Harem Silk — https://swatchly.xyz/palette/001017-002914-003a2c-195e19-006388 */
@theme {
  --color-black-knight: #001017;
  --color-black-knight-50: #eaf8fe;
  --color-black-knight-100: #dfeef5;
  --color-black-knight-200: #c9dbe3;
  --color-black-knight-300: #b0c5cd;
  --color-black-knight-400: #8fa6af;
  --color-black-knight-500: #6f8790;
  --color-black-knight-600: #536871;
  --color-black-knight-700: #3b4e55;
  --color-black-knight-800: #28373d;
  --color-black-knight-900: #192529;
  --color-black-knight-950: #001017;
  --color-haunted-forest: #002914;
  --color-haunted-forest-50: #e4fcec;
  --color-haunted-forest-100: #d8f3e1;
  --color-haunted-forest-200: #c1e1cb;
  --color-haunted-forest-300: #a7cbb3;
  --color-haunted-forest-400: #85ad92;
  --color-haunted-forest-500: #699277;
  --color-haunted-forest-600: #50775e;
  --color-haunted-forest-700: #3c6049;
  --color-haunted-forest-800: #2c4c38;
  --color-haunted-forest-900: #203b2a;
  --color-haunted-forest-950: #002914;
  --color-pitch-black-forests: #003a2c;
  --color-pitch-black-forests-50: #e0fdf2;
  --color-pitch-black-forests-100: #d3f4e8;
  --color-pitch-black-forests-200: #bbe2d3;
  --color-pitch-black-forests-300: #a0ccbc;
  --color-pitch-black-forests-400: #7cad9c;
  --color-pitch-black-forests-500: #5f9180;
  --color-pitch-black-forests-600: #457666;
  --color-pitch-black-forests-700: #305e4f;
  --color-pitch-black-forests-800: #21493c;
  --color-pitch-black-forests-900: #003a2c;
  --color-pitch-black-forests-950: #0a221b;
  --color-woodland-wonder: #195e19;
  --color-woodland-wonder-50: #e1ffdf;
  --color-woodland-wonder-100: #cef9cb;
  --color-woodland-wonder-200: #b3e6af;
  --color-woodland-wonder-300: #95d091;
  --color-woodland-wonder-400: #6fb06c;
  --color-woodland-wonder-500: #51934e;
  --color-woodland-wonder-600: #367634;
  --color-woodland-wonder-700: #195e19;
  --color-woodland-wonder-800: #154915;
  --color-woodland-wonder-900: #0c390c;
  --color-woodland-wonder-950: #052305;
  --color-harem-silk: #006388;
  --color-harem-silk-50: #eaf7ff;
  --color-harem-silk-100: #d5f0ff;
  --color-harem-silk-200: #ace1ff;
  --color-harem-silk-300: #8ccdf0;
  --color-harem-silk-400: #65afd5;
  --color-harem-silk-500: #4694bb;
  --color-harem-silk-600: #297a9f;
  --color-harem-silk-700: #006388;
  --color-harem-silk-800: #004d6b;
  --color-harem-silk-900: #003c54;
  --color-harem-silk-950: #002536;
}

    Similar palettes