Seafarer to Black Knight Color Palette

About this palette

Seafarer to Black Knight is a 4-color dark, cool palette: #004F6D (Seafarer), #366263 (Mediterranea), #002F28 (Pitch-Black Forests), #000C11 (Black Knight). It mixes blue, turquoise, black tones and feels cool overall. The strongest text pairing is #366263 on #000C11 with a contrast ratio of 2.91:1, and 0 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Seafarer	rgb(0, 79, 109)	hsl(197, 100%, 21%)
Mediterranea	rgb(54, 98, 99)	hsl(181, 29%, 30%)
Pitch-Black Forests	rgb(0, 47, 40)	hsl(171, 100%, 9%)
Black Knight	rgb(0, 12, 17)	hsl(198, 100%, 3%)

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

/* Seafarer to Black Knight — https://swatchly.xyz/palette/004f6d-366263-002f28-000c11 */
:root {
  --seafarer: #004f6d;
  --mediterranea: #366263;
  --pitch-black-forests: #002f28;
  --black-knight: #000c11;
}

Tailwind CSS v4

/* Seafarer to Black Knight — https://swatchly.xyz/palette/004f6d-366263-002f28-000c11 */
@theme {
  --color-seafarer: #004f6d;
  --color-seafarer-50: #eaf7ff;
  --color-seafarer-100: #d5f0ff;
  --color-seafarer-200: #b0dffa;
  --color-seafarer-300: #94cbe8;
  --color-seafarer-400: #70adcd;
  --color-seafarer-500: #5292b3;
  --color-seafarer-600: #387898;
  --color-seafarer-700: #24627f;
  --color-seafarer-800: #004f6d;
  --color-seafarer-900: #093d53;
  --color-seafarer-950: #022637;
  --color-mediterranea: #366263;
  --color-mediterranea-50: #e1fbfb;
  --color-mediterranea-100: #d5f2f2;
  --color-mediterranea-200: #bee0e1;
  --color-mediterranea-300: #a4cbcc;
  --color-mediterranea-400: #82adae;
  --color-mediterranea-500: #669393;
  --color-mediterranea-600: #4d7879;
  --color-mediterranea-700: #366263;
  --color-mediterranea-800: #284d4e;
  --color-mediterranea-900: #1c3b3c;
  --color-mediterranea-950: #0f2526;
  --color-pitch-black-forests: #002f28;
  --color-pitch-black-forests-50: #e3fcf6;
  --color-pitch-black-forests-100: #d6f2ec;
  --color-pitch-black-forests-200: #bee0d8;
  --color-pitch-black-forests-300: #a4cac2;
  --color-pitch-black-forests-400: #81aca2;
  --color-pitch-black-forests-500: #679289;
  --color-pitch-black-forests-600: #4e7970;
  --color-pitch-black-forests-700: #3b635b;
  --color-pitch-black-forests-800: #2c5049;
  --color-pitch-black-forests-900: #21413b;
  --color-pitch-black-forests-950: #002f28;
  --color-black-knight: #000c11;
  --color-black-knight-50: #ebf8fc;
  --color-black-knight-100: #e0eef3;
  --color-black-knight-200: #cadbe0;
  --color-black-knight-300: #b2c5cb;
  --color-black-knight-400: #91a6ac;
  --color-black-knight-500: #71858c;
  --color-black-knight-600: #53666c;
  --color-black-knight-700: #3b4b50;
  --color-black-knight-800: #273438;
  --color-black-knight-900: #172124;
  --color-black-knight-950: #000c11;
}