Black Knight to Blue Velvet Color Palette

About this palette

Black Knight to Blue Velvet is a 5-color dark, cool, gradient palette: #000A0D (Black Knight), #002D27 (Swamp Thing), #004447 (Rich Black), #464E12 (Godzilla), #016184 (Blue Velvet). It mixes black, turquoise, green, blue tones and feels cool overall. The strongest text pairing is #000A0D on #016184 with a contrast ratio of 2.90:1, and 0 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Black Knight	rgb(0, 10, 13)	hsl(194, 100%, 3%)
Swamp Thing	rgb(0, 45, 39)	hsl(172, 100%, 9%)
Rich Black	rgb(0, 68, 71)	hsl(183, 100%, 14%)
Godzilla	rgb(70, 78, 18)	hsl(68, 63%, 19%)
Blue Velvet	rgb(1, 97, 132)	hsl(196, 98%, 26%)

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

/* Black Knight to Blue Velvet — https://swatchly.xyz/palette/000a0d-002d27-004447-464e12-016184 */
:root {
  --black-knight: #000a0d;
  --swamp-thing: #002d27;
  --rich-black: #004447;
  --godzilla: #464e12;
  --blue-velvet: #016184;
}

Tailwind CSS v4

/* Black Knight to Blue Velvet — https://swatchly.xyz/palette/000a0d-002d27-004447-464e12-016184 */
@theme {
  --color-black-knight: #000a0d;
  --color-black-knight-50: #ecf8fa;
  --color-black-knight-100: #e1eef1;
  --color-black-knight-200: #cbdbde;
  --color-black-knight-300: #b3c5c8;
  --color-black-knight-400: #92a6a9;
  --color-black-knight-500: #728589;
  --color-black-knight-600: #546569;
  --color-black-knight-700: #3b4a4d;
  --color-black-knight-800: #263235;
  --color-black-knight-900: #161f20;
  --color-black-knight-950: #000a0d;
  --color-swamp-thing: #002d27;
  --color-swamp-thing-50: #e3fbf6;
  --color-swamp-thing-100: #d7f2ec;
  --color-swamp-thing-200: #bfe0d9;
  --color-swamp-thing-300: #a5cac2;
  --color-swamp-thing-400: #82aba3;
  --color-swamp-thing-500: #679189;
  --color-swamp-thing-600: #4f7870;
  --color-swamp-thing-700: #3b615a;
  --color-swamp-thing-800: #2c4f48;
  --color-swamp-thing-900: #213f3a;
  --color-swamp-thing-950: #002d27;
  --color-rich-black: #004447;
  --color-rich-black-50: #ddfcfe;
  --color-rich-black-100: #d0f3f5;
  --color-rich-black-200: #b6e1e3;
  --color-rich-black-300: #99cacc;
  --color-rich-black-400: #73aaad;
  --color-rich-black-500: #548d90;
  --color-rich-black-600: #3a7173;
  --color-rich-black-700: #25585a;
  --color-rich-black-800: #004447;
  --color-rich-black-900: #0e3335;
  --color-rich-black-950: #061f20;
  --color-godzilla: #464e12;
  --color-godzilla-50: #f3fad8;
  --color-godzilla-100: #e8f0ca;
  --color-godzilla-200: #d4ddb0;
  --color-godzilla-300: #bfc995;
  --color-godzilla-400: #a0ab72;
  --color-godzilla-500: #869056;
  --color-godzilla-600: #6d763d;
  --color-godzilla-700: #58602b;
  --color-godzilla-800: #464e12;
  --color-godzilla-900: #363c11;
  --color-godzilla-950: #222607;
  --color-blue-velvet: #016184;
  --color-blue-velvet-50: #eaf8ff;
  --color-blue-velvet-100: #d5f0ff;
  --color-blue-velvet-200: #aae1fe;
  --color-blue-velvet-300: #8dcced;
  --color-blue-velvet-400: #66aed2;
  --color-blue-velvet-500: #4692b8;
  --color-blue-velvet-600: #29789b;
  --color-blue-velvet-700: #016184;
  --color-blue-velvet-800: #004c68;
  --color-blue-velvet-900: #003a51;
  --color-blue-velvet-950: #002435;
}