Highlander to Black Box Color Palette

About this palette

Highlander to Black Box is a 5-color dark, cool palette: #2E563B (Highlander), #152B58 (Space Cadet), #334FA2 (Blasphemous Blue), #001111 (Jedi Night), #002B33 (Black Box). It mixes green, blue, black, turquoise tones and feels cool overall. The strongest text pairing is #334FA2 on #001111 with a contrast ratio of 2.56:1, and 0 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Highlander	rgb(46, 86, 59)	hsl(140, 30%, 26%)
Space Cadet	rgb(21, 43, 88)	hsl(220, 61%, 21%)
Blasphemous Blue	rgb(51, 79, 162)	hsl(225, 52%, 42%)
Jedi Night	rgb(0, 17, 17)	hsl(180, 100%, 3%)
Black Box	rgb(0, 43, 51)	hsl(189, 100%, 10%)

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

/* Highlander to Black Box — https://swatchly.xyz/palette/2e563b-152b58-334fa2-001111-002b33 */
:root {
  --highlander: #2e563b;
  --space-cadet: #152b58;
  --blasphemous-blue: #334fa2;
  --jedi-night: #001111;
  --black-box: #002b33;
}

Tailwind CSS v4

/* Highlander to Black Box — https://swatchly.xyz/palette/2e563b-152b58-334fa2-001111-002b33 */
@theme {
  --color-highlander: #2e563b;
  --color-highlander-50: #e4fdea;
  --color-highlander-100: #d8f3df;
  --color-highlander-200: #bedfc7;
  --color-highlander-300: #a3c8ad;
  --color-highlander-400: #7fa88a;
  --color-highlander-500: #618b6d;
  --color-highlander-600: #476e53;
  --color-highlander-700: #2e563b;
  --color-highlander-800: #24432e;
  --color-highlander-900: #1a3422;
  --color-highlander-950: #0e2014;
  --color-space-cadet: #152b58;
  --color-space-cadet-50: #f0f5ff;
  --color-space-cadet-100: #e1ecff;
  --color-space-cadet-200: #c3d8ff;
  --color-space-cadet-300: #a8c1f1;
  --color-space-cadet-400: #85a1d5;
  --color-space-cadet-500: #6884b8;
  --color-space-cadet-600: #4f6899;
  --color-space-cadet-700: #3a517d;
  --color-space-cadet-800: #2a3d62;
  --color-space-cadet-900: #152b58;
  --color-space-cadet-950: #0f1b30;
  --color-blasphemous-blue: #334fa2;
  --color-blasphemous-blue-50: #f1f5ff;
  --color-blasphemous-blue-100: #e2ebff;
  --color-blasphemous-blue-200: #c6d7ff;
  --color-blasphemous-blue-300: #a6c0ff;
  --color-blasphemous-blue-400: #7c9ef5;
  --color-blasphemous-blue-500: #6182da;
  --color-blasphemous-blue-600: #4867bb;
  --color-blasphemous-blue-700: #334fa2;
  --color-blasphemous-blue-800: #273d80;
  --color-blasphemous-blue-900: #1b2e67;
  --color-blasphemous-blue-950: #0e1c45;
  --color-jedi-night: #001111;
  --color-jedi-night-50: #eaf9f8;
  --color-jedi-night-100: #dfefef;
  --color-jedi-night-200: #c9dcdb;
  --color-jedi-night-300: #b0c6c5;
  --color-jedi-night-400: #8fa7a6;
  --color-jedi-night-500: #708887;
  --color-jedi-night-600: #536969;
  --color-jedi-night-700: #3b4f4e;
  --color-jedi-night-800: #283838;
  --color-jedi-night-900: #192525;
  --color-jedi-night-950: #001111;
  --color-black-box: #002b33;
  --color-black-box-50: #e4faff;
  --color-black-box-100: #d6f1f7;
  --color-black-box-200: #bfdee5;
  --color-black-box-300: #a4c8d1;
  --color-black-box-400: #82a9b2;
  --color-black-box-500: #678f98;
  --color-black-box-600: #4e767e;
  --color-black-box-700: #3b5f68;
  --color-black-box-800: #2c4d54;
  --color-black-box-900: #213d44;
  --color-black-box-950: #002b33;
}