Fly Away to Wing Commander color palette

83B7F0Fly Away 334717Treetop Cathedral D36297Flirty Rose FFE7EEPorcelain Skin 0060ABWing Commander

About this palette

Fly Away to Wing Commander is a 5-color cool palette: #83B7F0 (Fly Away), #334717 (Treetop Cathedral), #D36297 (Flirty Rose), #FFE7EE (Porcelain Skin), #0060AB (Wing Commander). It mixes blue, green, pink, white tones and feels cool overall. The strongest text pairing is #334717 on #FFE7EE with a contrast ratio of 8.72:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Fly Away	rgb(131, 183, 240)	hsl(211, 78%, 73%)
Treetop Cathedral	rgb(51, 71, 23)	hsl(85, 51%, 18%)
Flirty Rose	rgb(211, 98, 151)	hsl(332, 56%, 61%)
Porcelain Skin	rgb(255, 231, 238)	hsl(342, 100%, 95%)
Wing Commander	rgb(0, 96, 171)	hsl(206, 100%, 34%)

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.

Aa8.72:1 Very good#334717 on #FFE7EE
Aa8.72:1 Very good#FFE7EE on #334717
Aa5.49:1 Good#FFE7EE on #0060AB
Aa5.49:1 Good#0060AB on #FFE7EE
Aa4.87:1 Good#83B7F0 on #334717
Aa4.87:1 Good#334717 on #83B7F0
Aa3.07:1 Poor#83B7F0 on #0060AB
Aa3.07:1 Poor#0060AB on #83B7F0

Color blindness preview

CSS variables

/* Fly Away to Wing Commander — https://swatchly.xyz/palette/83b7f0-334717-d36297-ffe7ee-0060ab */
:root {
  --fly-away: #83b7f0;
  --treetop-cathedral: #334717;
  --flirty-rose: #d36297;
  --porcelain-skin: #ffe7ee;
  --wing-commander: #0060ab;
}

Tailwind CSS v4

/* Fly Away to Wing Commander — https://swatchly.xyz/palette/83b7f0-334717-d36297-ffe7ee-0060ab */
@theme {
  --color-fly-away: #83b7f0;
  --color-fly-away-50: #e1efff;
  --color-fly-away-100: #cce4ff;
  --color-fly-away-200: #a5d0fe;
  --color-fly-away-300: #83b7f0;
  --color-fly-away-400: #689ad0;
  --color-fly-away-500: #4f81b6;
  --color-fly-away-600: #38689b;
  --color-fly-away-700: #275381;
  --color-fly-away-800: #1b426a;
  --color-fly-away-900: #123457;
  --color-fly-away-950: #072039;
  --color-treetop-cathedral: #334717;
  --color-treetop-cathedral-50: #edfbde;
  --color-treetop-cathedral-100: #e2f2d1;
  --color-treetop-cathedral-200: #ccdfb8;
  --color-treetop-cathedral-300: #b4c99c;
  --color-treetop-cathedral-400: #92aa79;
  --color-treetop-cathedral-500: #778e5c;
  --color-treetop-cathedral-600: #5c7243;
  --color-treetop-cathedral-700: #475a2f;
  --color-treetop-cathedral-800: #334717;
  --color-treetop-cathedral-900: #283616;
  --color-treetop-cathedral-950: #17210a;
  --color-flirty-rose: #d36297;
  --color-flirty-rose-50: #fff3f7;
  --color-flirty-rose-100: #ffe7f0;
  --color-flirty-rose-200: #ffcbe0;
  --color-flirty-rose-300: #ffa9cd;
  --color-flirty-rose-400: #ed80b1;
  --color-flirty-rose-500: #d36297;
  --color-flirty-rose-600: #b2457b;
  --color-flirty-rose-700: #932e62;
  --color-flirty-rose-800: #771d4c;
  --color-flirty-rose-900: #5e113a;
  --color-flirty-rose-950: #3d0624;
  --color-porcelain-skin: #ffe7ee;
  --color-porcelain-skin-50: #fff5f8;
  --color-porcelain-skin-100: #ffe7ee;
  --color-porcelain-skin-200: #e6d5da;
  --color-porcelain-skin-300: #d0bdc3;
  --color-porcelain-skin-400: #b29ca3;
  --color-porcelain-skin-500: #968087;
  --color-porcelain-skin-600: #7a666c;
  --color-porcelain-skin-700: #625055;
  --color-porcelain-skin-800: #4d3d42;
  --color-porcelain-skin-900: #3c2f33;
  --color-porcelain-skin-950: #261c1f;
  --color-wing-commander: #0060ab;
  --color-wing-commander-50: #eef6ff;
  --color-wing-commander-100: #ddedff;
  --color-wing-commander-200: #beddff;
  --color-wing-commander-300: #98c9ff;
  --color-wing-commander-400: #62abf8;
  --color-wing-commander-500: #4391df;
  --color-wing-commander-600: #2676c3;
  --color-wing-commander-700: #0060ab;
  --color-wing-commander-800: #004b88;
  --color-wing-commander-900: #00396a;
  --color-wing-commander-950: #002446;
}