Black Knight to Aqua Obscura color palette

000C0EBlack Knight 0C2527Sunken Ship 003215Haunted Hills 004934Zucchini 32525ANocturne Blue 006B6AAqua Obscura

Open in generator Export PNG, PDF, ASE…

About this palette

Black Knight to Aqua Obscura is a 6-color dark, cool, gradient palette: #000C0E (Black Knight), #0C2527 (Sunken Ship), #003215 (Haunted Hills), #004934 (Zucchini), #32525A (Nocturne Blue), #006B6A (Aqua Obscura). It mixes black, gray, green, turquoise, blue tones and feels cool overall. The strongest text pairing is #000C0E on #006B6A with a contrast ratio of 3.13:1, and 0 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Black Knight	rgb(0, 12, 14)	hsl(189, 100%, 3%)
Sunken Ship	rgb(12, 37, 39)	hsl(184, 53%, 10%)
Haunted Hills	rgb(0, 50, 21)	hsl(145, 100%, 10%)
Zucchini	rgb(0, 73, 52)	hsl(163, 100%, 14%)
Nocturne Blue	rgb(50, 82, 90)	hsl(192, 29%, 27%)
Aqua Obscura	rgb(0, 107, 106)	hsl(179, 100%, 21%)

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.13:1 Poor#000C0E on #006B6A
Aa3.13:1 Poor#006B6A on #000C0E

Color blindness preview

CSS variables

/* Black Knight to Aqua Obscura — https://swatchly.xyz/palette/000c0e-0c2527-003215-004934-32525a-006b6a */
:root {
  --black-knight: #000c0e;
  --sunken-ship: #0c2527;
  --haunted-hills: #003215;
  --zucchini: #004934;
  --nocturne-blue: #32525a;
  --aqua-obscura: #006b6a;
}

Tailwind CSS v4

/* Black Knight to Aqua Obscura — https://swatchly.xyz/palette/000c0e-0c2527-003215-004934-32525a-006b6a */
@theme {
  --color-black-knight: #000c0e;
  --color-black-knight-50: #ecf8f9;
  --color-black-knight-100: #e0eef0;
  --color-black-knight-200: #cbdbdd;
  --color-black-knight-300: #b2c5c7;
  --color-black-knight-400: #92a6a8;
  --color-black-knight-500: #718688;
  --color-black-knight-600: #536669;
  --color-black-knight-700: #3b4b4d;
  --color-black-knight-800: #273436;
  --color-black-knight-900: #172122;
  --color-black-knight-950: #000c0e;
  --color-sunken-ship: #0c2527;
  --color-sunken-ship-50: #e9f9fa;
  --color-sunken-ship-100: #ddeff1;
  --color-sunken-ship-200: #c7dcde;
  --color-sunken-ship-300: #aec6c8;
  --color-sunken-ship-400: #8da7a9;
  --color-sunken-ship-500: #718c8e;
  --color-sunken-ship-600: #587274;
  --color-sunken-ship-700: #435b5d;
  --color-sunken-ship-800: #334849;
  --color-sunken-ship-900: #263839;
  --color-sunken-ship-950: #0c2527;
  --color-haunted-hills: #003215;
  --color-haunted-hills-50: #e2fde8;
  --color-haunted-hills-100: #d6f4dd;
  --color-haunted-hills-200: #bee2c6;
  --color-haunted-hills-300: #a4cdad;
  --color-haunted-hills-400: #81af8c;
  --color-haunted-hills-500: #669572;
  --color-haunted-hills-600: #4e7c5b;
  --color-haunted-hills-700: #3b6647;
  --color-haunted-hills-800: #2c5338;
  --color-haunted-hills-900: #21442c;
  --color-haunted-hills-950: #003215;
  --color-zucchini: #004934;
  --color-zucchini-50: #ddfeef;
  --color-zucchini-100: #cff6e4;
  --color-zucchini-200: #b6e4cf;
  --color-zucchini-300: #99ceb7;
  --color-zucchini-400: #73ae95;
  --color-zucchini-500: #559279;
  --color-zucchini-600: #3a755e;
  --color-zucchini-700: #265c48;
  --color-zucchini-800: #004934;
  --color-zucchini-900: #0e3728;
  --color-zucchini-950: #052218;
  --color-nocturne-blue: #32525a;
  --color-nocturne-blue-50: #e6f9fe;
  --color-nocturne-blue-100: #daf0f6;
  --color-nocturne-blue-200: #c1dbe2;
  --color-nocturne-blue-300: #a5c4cc;
  --color-nocturne-blue-400: #82a3ac;
  --color-nocturne-blue-500: #65868f;
  --color-nocturne-blue-600: #4a6a72;
  --color-nocturne-blue-700: #32525a;
  --color-nocturne-blue-800: #274046;
  --color-nocturne-blue-900: #1d3136;
  --color-nocturne-blue-950: #0f1e22;
  --color-aqua-obscura: #006b6a;
  --color-aqua-obscura-50: #d5fffd;
  --color-aqua-obscura-100: #c5f7f5;
  --color-aqua-obscura-200: #abe6e4;
  --color-aqua-obscura-300: #8ed2d0;
  --color-aqua-obscura-400: #67b5b4;
  --color-aqua-obscura-500: #479b9a;
  --color-aqua-obscura-600: #2a8180;
  --color-aqua-obscura-700: #006b6a;
  --color-aqua-obscura-800: #005453;
  --color-aqua-obscura-900: #004140;
  --color-aqua-obscura-950: #002928;
}