Captain Kirk to Blue Mana Color Palette

About this palette

Captain Kirk to Blue Mana is a 5-color vibrant, cool palette: #8B8B00 (Captain Kirk), #0099E4 (Homeworld), #EE8800 (Elden Ring Orange), #006ABE (French Blue), #72C2FF (Blue Mana). It mixes yellow, blue, orange tones and feels cool overall. The strongest text pairing is #006ABE on #72C2FF with a contrast ratio of 2.86:1, and 0 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Captain Kirk	rgb(139, 139, 0)	hsl(60, 100%, 27%)
Homeworld	rgb(0, 153, 228)	hsl(200, 100%, 45%)
Elden Ring Orange	rgb(238, 136, 0)	hsl(34, 100%, 47%)
French Blue	rgb(0, 106, 190)	hsl(207, 100%, 37%)
Blue Mana	rgb(114, 194, 255)	hsl(206, 100%, 72%)

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

/* Captain Kirk to Blue Mana — https://swatchly.xyz/palette/8b8b00-0099e4-ee8800-006abe-72c2ff */
:root {
  --captain-kirk: #8b8b00;
  --homeworld: #0099e4;
  --elden-ring-orange: #ee8800;
  --french-blue: #006abe;
  --blue-mana: #72c2ff;
}

Tailwind CSS v4

/* Captain Kirk to Blue Mana — https://swatchly.xyz/palette/8b8b00-0099e4-ee8800-006abe-72c2ff */
@theme {
  --color-captain-kirk: #8b8b00;
  --color-captain-kirk-50: #f8fac1;
  --color-captain-kirk-100: #eef0af;
  --color-captain-kirk-200: #dbdd8f;
  --color-captain-kirk-300: #c5c76b;
  --color-captain-kirk-400: #a6a73b;
  --color-captain-kirk-500: #8b8b00;
  --color-captain-kirk-600: #707000;
  --color-captain-kirk-700: #595900;
  --color-captain-kirk-800: #454500;
  --color-captain-kirk-900: #353500;
  --color-captain-kirk-950: #212100;
  --color-homeworld: #0099e4;
  --color-homeworld-50: #f0f8ff;
  --color-homeworld-100: #e0f2ff;
  --color-homeworld-200: #bde2ff;
  --color-homeworld-300: #91d0ff;
  --color-homeworld-400: #45b4fc;
  --color-homeworld-500: #0099e4;
  --color-homeworld-600: #007bb9;
  --color-homeworld-700: #006193;
  --color-homeworld-800: #004b74;
  --color-homeworld-900: #00395a;
  --color-homeworld-950: #002339;
  --color-elden-ring-orange: #ee8800;
  --color-elden-ring-orange-50: #fff4ec;
  --color-elden-ring-orange-100: #ffe9d6;
  --color-elden-ring-orange-200: #ffd0a8;
  --color-elden-ring-orange-300: #ffb06b;
  --color-elden-ring-orange-400: #ee8800;
  --color-elden-ring-orange-500: #c77000;
  --color-elden-ring-orange-600: #a15a00;
  --color-elden-ring-orange-700: #804600;
  --color-elden-ring-orange-800: #653600;
  --color-elden-ring-orange-900: #4e2900;
  --color-elden-ring-orange-950: #321800;
  --color-french-blue: #006abe;
  --color-french-blue-50: #eef6ff;
  --color-french-blue-100: #dcedff;
  --color-french-blue-200: #b9daff;
  --color-french-blue-300: #8fc4ff;
  --color-french-blue-400: #52a3f9;
  --color-french-blue-500: #2f86dd;
  --color-french-blue-600: #006abe;
  --color-french-blue-700: #005498;
  --color-french-blue-800: #004179;
  --color-french-blue-900: #00325f;
  --color-french-blue-950: #001f3f;
  --color-blue-mana: #72c2ff;
  --color-blue-mana-50: #e5f3ff;
  --color-blue-mana-100: #d0eaff;
  --color-blue-mana-200: #a7d8ff;
  --color-blue-mana-300: #72c2ff;
  --color-blue-mana-400: #56a3dd;
  --color-blue-mana-500: #3788c2;
  --color-blue-mana-600: #196ea5;
  --color-blue-mana-700: #005889;
  --color-blue-mana-800: #00456d;
  --color-blue-mana-900: #003657;
  --color-blue-mana-950: #002139;
}