Java to Wing Commander Color Palette

About this palette

Java to Wing Commander is a 5-color vintage palette: #009493 (Java), #E4AF75 (Manhattan), #FFEEEC (Voracious White), #522B31 (Dark Roast), #1D5EAF (Wing Commander). It mixes turquoise, orange, white, brown, blue tones and feels balanced overall. The strongest text pairing is #FFEEEC on #522B31 with a contrast ratio of 10.69:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Java	rgb(0, 148, 147)	hsl(180, 100%, 29%)
Manhattan	rgb(228, 175, 117)	hsl(31, 67%, 68%)
Voracious White	rgb(255, 238, 236)	hsl(6, 100%, 96%)
Dark Roast	rgb(82, 43, 49)	hsl(351, 31%, 25%)
Wing Commander	rgb(29, 94, 175)	hsl(213, 72%, 40%)

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.

Aa10.69:1 Very good#FFEEEC on #522B31
Aa10.69:1 Very good#522B31 on #FFEEEC
Aa6.11:1 Good#E4AF75 on #522B31
Aa6.11:1 Good#522B31 on #E4AF75
Aa5.71:1 Good#FFEEEC on #1D5EAF
Aa5.71:1 Good#1D5EAF on #FFEEEC
Aa3.30:1 Poor#009493 on #FFEEEC
Aa3.30:1 Poor#FFEEEC on #009493

Color blindness preview

CSS variables

/* Java to Wing Commander — https://swatchly.xyz/palette/009493-e4af75-ffeeec-522b31-1d5eaf */
:root {
  --java: #009493;
  --manhattan: #e4af75;
  --voracious-white: #ffeeec;
  --dark-roast: #522b31;
  --wing-commander: #1d5eaf;
}

Tailwind CSS v4

/* Java to Wing Commander — https://swatchly.xyz/palette/009493-e4af75-ffeeec-522b31-1d5eaf */
@theme {
  --color-java: #009493;
  --color-java-50: #d0fffd;
  --color-java-100: #b7f8f6;
  --color-java-200: #96e5e4;
  --color-java-300: #72d0ce;
  --color-java-400: #40b1af;
  --color-java-500: #009493;
  --color-java-600: #007776;
  --color-java-700: #005f5e;
  --color-java-800: #004a4a;
  --color-java-900: #003a39;
  --color-java-950: #002424;
  --color-manhattan: #e4af75;
  --color-manhattan-50: #ffefde;
  --color-manhattan-100: #ffe1c2;
  --color-manhattan-200: #f3ca9d;
  --color-manhattan-300: #e4af75;
  --color-manhattan-400: #c3915a;
  --color-manhattan-500: #a8773d;
  --color-manhattan-600: #8c5d24;
  --color-manhattan-700: #734910;
  --color-manhattan-800: #5d3802;
  --color-manhattan-900: #4a2b00;
  --color-manhattan-950: #2f1a00;
  --color-voracious-white: #ffeeec;
  --color-voracious-white-50: #ffeeec;
  --color-voracious-white-100: #f1e6e5;
  --color-voracious-white-200: #dfd2d1;
  --color-voracious-white-300: #cabcba;
  --color-voracious-white-400: #ac9d9b;
  --color-voracious-white-500: #918280;
  --color-voracious-white-600: #766866;
  --color-voracious-white-700: #5f5250;
  --color-voracious-white-800: #4a3f3e;
  --color-voracious-white-900: #3a302f;
  --color-voracious-white-950: #241d1d;
  --color-dark-roast: #522b31;
  --color-dark-roast-50: #fff1f3;
  --color-dark-roast-100: #ffe3e6;
  --color-dark-roast-200: #f2ccd0;
  --color-dark-roast-300: #dfb4b9;
  --color-dark-roast-400: #c3959a;
  --color-dark-roast-500: #a87a80;
  --color-dark-roast-600: #8d6167;
  --color-dark-roast-700: #744d52;
  --color-dark-roast-800: #5f3c41;
  --color-dark-roast-900: #522b31;
  --color-dark-roast-950: #331c1f;
  --color-wing-commander: #1d5eaf;
  --color-wing-commander-50: #eff6ff;
  --color-wing-commander-100: #dfecff;
  --color-wing-commander-200: #c2dcff;
  --color-wing-commander-300: #9fc8ff;
  --color-wing-commander-400: #6ca9fc;
  --color-wing-commander-500: #4f8ee3;
  --color-wing-commander-600: #3574c7;
  --color-wing-commander-700: #1d5eaf;
  --color-wing-commander-800: #10498e;
  --color-wing-commander-900: #053772;
  --color-wing-commander-950: #00224d;
}