Black Knight to Elite Teal color palette

000D11Black Knight 004B2CZucchini 002337Midnight Dreams 435200Godzilla 546C00Over the Hills 003732Elite Teal

Open in generator Export PNG, PDF, ASE…

About this palette

Black Knight to Elite Teal is a 6-color dark, cool palette: #000D11 (Black Knight), #004B2C (Zucchini), #002337 (Midnight Dreams), #435200 (Godzilla), #546C00 (Over the Hills), #003732 (Elite Teal). It mixes black, green, blue, turquoise tones and feels cool overall. The strongest text pairing is #000D11 on #546C00 with a contrast ratio of 3.30:1, and 0 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Black Knight	rgb(0, 13, 17)	hsl(194, 100%, 3%)
Zucchini	rgb(0, 75, 44)	hsl(155, 100%, 15%)
Midnight Dreams	rgb(0, 35, 55)	hsl(202, 100%, 11%)
Godzilla	rgb(67, 82, 0)	hsl(71, 100%, 16%)
Over the Hills	rgb(84, 108, 0)	hsl(73, 100%, 21%)
Elite Teal	rgb(0, 55, 50)	hsl(175, 100%, 11%)

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.

Aa3.30:1 Poor#000D11 on #546C00
Aa3.30:1 Poor#546C00 on #000D11

Color blindness preview

CSS variables

/* Black Knight to Elite Teal — https://swatchly.xyz/palette/000d11-004b2c-002337-435200-546c00-003732 */
:root {
  --black-knight: #000d11;
  --zucchini: #004b2c;
  --midnight-dreams: #002337;
  --godzilla: #435200;
  --over-the-hills: #546c00;
  --elite-teal: #003732;
}

Tailwind CSS v4

/* Black Knight to Elite Teal — https://swatchly.xyz/palette/000d11-004b2c-002337-435200-546c00-003732 */
@theme {
  --color-black-knight: #000d11;
  --color-black-knight-50: #ebf8fb;
  --color-black-knight-100: #e0eef2;
  --color-black-knight-200: #cadbdf;
  --color-black-knight-300: #b2c5ca;
  --color-black-knight-400: #91a6ab;
  --color-black-knight-500: #71868b;
  --color-black-knight-600: #53676c;
  --color-black-knight-700: #3b4c50;
  --color-black-knight-800: #273538;
  --color-black-knight-900: #182224;
  --color-black-knight-950: #000d11;
  --color-zucchini: #004b2c;
  --color-zucchini-50: #ddffea;
  --color-zucchini-100: #cff7de;
  --color-zucchini-200: #b5e5c8;
  --color-zucchini-300: #98cfae;
  --color-zucchini-400: #73b08c;
  --color-zucchini-500: #559370;
  --color-zucchini-600: #3a7756;
  --color-zucchini-700: #265e41;
  --color-zucchini-800: #004b2c;
  --color-zucchini-900: #0d3823;
  --color-zucchini-950: #052314;
  --color-midnight-dreams: #002337;
  --color-midnight-dreams-50: #ecf7ff;
  --color-midnight-dreams-100: #d8efff;
  --color-midnight-dreams-200: #c0dcf0;
  --color-midnight-dreams-300: #a6c6dc;
  --color-midnight-dreams-400: #84a7bf;
  --color-midnight-dreams-500: #688ba4;
  --color-midnight-dreams-600: #4f7188;
  --color-midnight-dreams-700: #3a5a6f;
  --color-midnight-dreams-800: #2b4759;
  --color-midnight-dreams-900: #1f3746;
  --color-midnight-dreams-950: #002337;
  --color-godzilla: #435200;
  --color-godzilla-50: #effbd3;
  --color-godzilla-100: #e5f2c5;
  --color-godzilla-200: #d0dfaa;
  --color-godzilla-300: #bacb8e;
  --color-godzilla-400: #9cae6a;
  --color-godzilla-500: #82944d;
  --color-godzilla-600: #697a34;
  --color-godzilla-700: #556421;
  --color-godzilla-800: #435200;
  --color-godzilla-900: #343f07;
  --color-godzilla-950: #202801;
  --color-over-the-hills: #546c00;
  --color-over-the-hills-50: #ecfdcc;
  --color-over-the-hills-100: #dff2ba;
  --color-over-the-hills-200: #c7de9a;
  --color-over-the-hills-300: #adc778;
  --color-over-the-hills-400: #8ca64e;
  --color-over-the-hills-500: #6f892c;
  --color-over-the-hills-600: #546c00;
  --color-over-the-hills-700: #425600;
  --color-over-the-hills-800: #334300;
  --color-over-the-hills-900: #273400;
  --color-over-the-hills-950: #172000;
  --color-elite-teal: #003732;
  --color-elite-teal-50: #e0fcf8;
  --color-elite-teal-100: #d4f3ee;
  --color-elite-teal-200: #bce0db;
  --color-elite-teal-300: #a1cbc5;
  --color-elite-teal-400: #7caba5;
  --color-elite-teal-500: #5f8f89;
  --color-elite-teal-600: #45736d;
  --color-elite-teal-700: #305b56;
  --color-elite-teal-800: #214642;
  --color-elite-teal-900: #003732;
  --color-elite-teal-950: #0a201e;
}