Total Eclipse to Fly a Kite color palette

333743Total Eclipse 464D66Into the Stratosphere 69728FDark Prince 9FA6CBOld World CFD8EFFly a Kite

About this palette

Total Eclipse to Fly a Kite is a 5-color muted, cool, gradient palette: #333743 (Total Eclipse), #464D66 (Into the Stratosphere), #69728F (Dark Prince), #9FA6CB (Old World), #CFD8EF (Fly a Kite). It mixes gray, blue, purple tones and feels cool overall. The strongest text pairing is #333743 on #CFD8EF with a contrast ratio of 8.33:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Total Eclipse	rgb(51, 55, 67)	hsl(225, 14%, 23%)
Into the Stratosphere	rgb(70, 77, 102)	hsl(227, 19%, 34%)
Dark Prince	rgb(105, 114, 143)	hsl(226, 15%, 49%)
Old World	rgb(159, 166, 203)	hsl(230, 30%, 71%)
Fly a Kite	rgb(207, 216, 239)	hsl(223, 50%, 87%)

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.33:1 Very good#333743 on #CFD8EF
Aa8.33:1 Very good#CFD8EF on #333743
Aa5.86:1 Good#464D66 on #CFD8EF
Aa5.86:1 Good#CFD8EF on #464D66
Aa4.97:1 Good#333743 on #9FA6CB
Aa4.97:1 Good#9FA6CB on #333743
Aa3.50:1 Poor#464D66 on #9FA6CB
Aa3.50:1 Poor#9FA6CB on #464D66

Color blindness preview

CSS variables

/* Total Eclipse to Fly a Kite — https://swatchly.xyz/palette/333743-464d66-69728f-9fa6cb-cfd8ef */
:root {
  --total-eclipse: #333743;
  --into-the-stratosphere: #464d66;
  --dark-prince: #69728f;
  --old-world: #9fa6cb;
  --fly-a-kite: #cfd8ef;
}

Tailwind CSS v4

/* Total Eclipse to Fly a Kite — https://swatchly.xyz/palette/333743-464d66-69728f-9fa6cb-cfd8ef */
@theme {
  --color-total-eclipse: #333743;
  --color-total-eclipse-50: #f2f5fe;
  --color-total-eclipse-100: #e8ebf5;
  --color-total-eclipse-200: #d3d7e3;
  --color-total-eclipse-300: #bcc1cd;
  --color-total-eclipse-400: #9da2b0;
  --color-total-eclipse-500: #838896;
  --color-total-eclipse-600: #696e7b;
  --color-total-eclipse-700: #545864;
  --color-total-eclipse-800: #424651;
  --color-total-eclipse-900: #333743;
  --color-total-eclipse-950: #202329;
  --color-into-the-stratosphere: #464d66;
  --color-into-the-stratosphere-50: #f2f5ff;
  --color-into-the-stratosphere-100: #e5ebfe;
  --color-into-the-stratosphere-200: #cfd5ec;
  --color-into-the-stratosphere-300: #b6bdd7;
  --color-into-the-stratosphere-400: #949cb8;
  --color-into-the-stratosphere-500: #78809b;
  --color-into-the-stratosphere-600: #5d657e;
  --color-into-the-stratosphere-700: #464d66;
  --color-into-the-stratosphere-800: #363c4f;
  --color-into-the-stratosphere-900: #292e3e;
  --color-into-the-stratosphere-950: #181c27;
  --color-dark-prince: #69728f;
  --color-dark-prince-50: #f1f5ff;
  --color-dark-prince-100: #e6ecff;
  --color-dark-prince-200: #d2daf1;
  --color-dark-prince-300: #bcc4df;
  --color-dark-prince-400: #9ca6c3;
  --color-dark-prince-500: #828ba9;
  --color-dark-prince-600: #69728f;
  --color-dark-prince-700: #525a74;
  --color-dark-prince-800: #3f465d;
  --color-dark-prince-900: #2f3549;
  --color-dark-prince-950: #1c212f;
  --color-old-world: #9fa6cb;
  --color-old-world-50: #f5f7ff;
  --color-old-world-100: #eaeeff;
  --color-old-world-200: #d5dbf7;
  --color-old-world-300: #bfc5e5;
  --color-old-world-400: #9fa6cb;
  --color-old-world-500: #8389ad;
  --color-old-world-600: #686e90;
  --color-old-world-700: #515675;
  --color-old-world-800: #3e425d;
  --color-old-world-900: #2e3249;
  --color-old-world-950: #1b1e2e;
  --color-fly-a-kite: #cfd8ef;
  --color-fly-a-kite-50: #f2f6ff;
  --color-fly-a-kite-100: #e6ecfa;
  --color-fly-a-kite-200: #cfd8ef;
  --color-fly-a-kite-300: #bac1d4;
  --color-fly-a-kite-400: #9aa2b7;
  --color-fly-a-kite-500: #7e869b;
  --color-fly-a-kite-600: #646c80;
  --color-fly-a-kite-700: #4e5567;
  --color-fly-a-kite-800: #3c4252;
  --color-fly-a-kite-900: #2e3340;
  --color-fly-a-kite-950: #1b1f28;
}