Blackn’t to Wing Commander Color Palette

About this palette

Blackn’t to Wing Commander is a 4-color dark, cool palette: #020C00 (Blackn’t), #0E3022 (Pitch-Black Forests), #363F1D (Forestry), #1C69A8 (Wing Commander). It mixes black, green, blue tones and feels cool overall. The strongest text pairing is #020C00 on #1C69A8 with a contrast ratio of 3.45:1, and 0 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Blackn’t	rgb(2, 12, 0)	hsl(110, 100%, 2%)
Pitch-Black Forests	rgb(14, 48, 34)	hsl(155, 55%, 12%)
Forestry	rgb(54, 63, 29)	hsl(76, 37%, 18%)
Wing Commander	rgb(28, 105, 168)	hsl(207, 71%, 38%)

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.45:1 Poor#020C00 on #1C69A8
Aa3.45:1 Poor#1C69A8 on #020C00

Color blindness preview

CSS variables

/* Blackn’t to Wing Commander — https://swatchly.xyz/palette/020c00-0e3022-363f1d-1c69a8 */
:root {
  --blackn-t: #020c00;
  --pitch-black-forests: #0e3022;
  --forestry: #363f1d;
  --wing-commander: #1c69a8;
}

Tailwind CSS v4

/* Blackn’t to Wing Commander — https://swatchly.xyz/palette/020c00-0e3022-363f1d-1c69a8 */
@theme {
  --color-blackn-t: #020c00;
  --color-blackn-t-50: #eef9ea;
  --color-blackn-t-100: #e3f0df;
  --color-blackn-t-200: #ceddc9;
  --color-blackn-t-300: #b6c7b0;
  --color-blackn-t-400: #96a88f;
  --color-blackn-t-500: #75876f;
  --color-blackn-t-600: #576851;
  --color-blackn-t-700: #3e4c39;
  --color-blackn-t-800: #293425;
  --color-blackn-t-900: #192016;
  --color-blackn-t-950: #020c00;
  --color-pitch-black-forests: #0e3022;
  --color-pitch-black-forests-50: #e6fbf0;
  --color-pitch-black-forests-100: #daf2e6;
  --color-pitch-black-forests-200: #c4dfd1;
  --color-pitch-black-forests-300: #aacaba;
  --color-pitch-black-forests-400: #88ab99;
  --color-pitch-black-forests-500: #6e9280;
  --color-pitch-black-forests-600: #567968;
  --color-pitch-black-forests-700: #436354;
  --color-pitch-black-forests-800: #345143;
  --color-pitch-black-forests-900: #284236;
  --color-pitch-black-forests-950: #0e3022;
  --color-forestry: #363f1d;
  --color-forestry-50: #f2f9e3;
  --color-forestry-100: #e7efd6;
  --color-forestry-200: #d3dcbf;
  --color-forestry-300: #bac5a3;
  --color-forestry-400: #99a47f;
  --color-forestry-500: #7c8762;
  --color-forestry-600: #616b48;
  --color-forestry-700: #4a5334;
  --color-forestry-800: #363f1d;
  --color-forestry-900: #2a301a;
  --color-forestry-950: #181d0d;
  --color-wing-commander: #1c69a8;
  --color-wing-commander-50: #eef6ff;
  --color-wing-commander-100: #daecff;
  --color-wing-commander-200: #b4daff;
  --color-wing-commander-300: #85c3ff;
  --color-wing-commander-400: #5da2e4;
  --color-wing-commander-500: #3c85c6;
  --color-wing-commander-600: #1c69a8;
  --color-wing-commander-700: #0a538a;
  --color-wing-commander-800: #004170;
  --color-wing-commander-900: #003258;
  --color-wing-commander-950: #001f3a;
}