Darth Vader to Intergalactic color palette

23242DDarth Vader 9C9D89Knock on Wood 767696Stormy Horizon CFD3C3Wishing Well 51516DIntergalactic

About this palette

Darth Vader to Intergalactic is a 5-color muted palette: #23242D (Darth Vader), #9C9D89 (Knock on Wood), #767696 (Stormy Horizon), #CFD3C3 (Wishing Well), #51516D (Intergalactic). It mixes gray, purple tones and feels cool overall. The strongest text pairing is #23242D on #CFD3C3 with a contrast ratio of 10.10:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Darth Vader	rgb(35, 36, 45)	hsl(234, 12%, 16%)
Knock on Wood	rgb(156, 157, 137)	hsl(63, 9%, 58%)
Stormy Horizon	rgb(118, 118, 150)	hsl(240, 13%, 53%)
Wishing Well	rgb(207, 211, 195)	hsl(75, 15%, 80%)
Intergalactic	rgb(81, 81, 109)	hsl(240, 15%, 37%)

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.10:1 Very good#23242D on #CFD3C3
Aa10.10:1 Very good#CFD3C3 on #23242D
Aa5.58:1 Good#23242D on #9C9D89
Aa5.58:1 Good#9C9D89 on #23242D
Aa5.01:1 Good#CFD3C3 on #51516D
Aa5.01:1 Good#51516D on #CFD3C3
Aa3.53:1 Poor#23242D on #767696
Aa3.53:1 Poor#767696 on #23242D

Color blindness preview

CSS variables

/* Darth Vader to Intergalactic — https://swatchly.xyz/palette/23242d-9c9d89-767696-cfd3c3-51516d */
:root {
  --darth-vader: #23242d;
  --knock-on-wood: #9c9d89;
  --stormy-horizon: #767696;
  --wishing-well: #cfd3c3;
  --intergalactic: #51516d;
}

Tailwind CSS v4

/* Darth Vader to Intergalactic — https://swatchly.xyz/palette/23242d-9c9d89-767696-cfd3c3-51516d */
@theme {
  --color-darth-vader: #23242d;
  --color-darth-vader-50: #f4f5fb;
  --color-darth-vader-100: #e9eaf2;
  --color-darth-vader-200: #d6d7e0;
  --color-darth-vader-300: #bfc0ca;
  --color-darth-vader-400: #9fa1ac;
  --color-darth-vader-500: #858692;
  --color-darth-vader-600: #6c6d78;
  --color-darth-vader-700: #565861;
  --color-darth-vader-800: #45464e;
  --color-darth-vader-900: #36373f;
  --color-darth-vader-950: #23242d;
  --color-knock-on-wood: #9c9d89;
  --color-knock-on-wood-50: #f3f4e8;
  --color-knock-on-wood-100: #e8e9db;
  --color-knock-on-wood-200: #d4d5c4;
  --color-knock-on-wood-300: #bcbdab;
  --color-knock-on-wood-400: #9c9d89;
  --color-knock-on-wood-500: #82836f;
  --color-knock-on-wood-600: #696957;
  --color-knock-on-wood-700: #535443;
  --color-knock-on-wood-800: #414233;
  --color-knock-on-wood-900: #323327;
  --color-knock-on-wood-950: #202017;
  --color-stormy-horizon: #767696;
  --color-stormy-horizon-50: #f1f1ff;
  --color-stormy-horizon-100: #e4e4fc;
  --color-stormy-horizon-200: #cdcee9;
  --color-stormy-horizon-300: #b4b5d3;
  --color-stormy-horizon-400: #9393b4;
  --color-stormy-horizon-500: #767696;
  --color-stormy-horizon-600: #5e5e7c;
  --color-stormy-horizon-700: #4b4a65;
  --color-stormy-horizon-800: #3a3a51;
  --color-stormy-horizon-900: #2d2d40;
  --color-stormy-horizon-950: #1c1c2a;
  --color-wishing-well: #cfd3c3;
  --color-wishing-well-50: #eff2e8;
  --color-wishing-well-100: #e4e7dc;
  --color-wishing-well-200: #cfd3c3;
  --color-wishing-well-300: #babdb0;
  --color-wishing-well-400: #9c9f91;
  --color-wishing-well-500: #818576;
  --color-wishing-well-600: #686c5e;
  --color-wishing-well-700: #535649;
  --color-wishing-well-800: #414439;
  --color-wishing-well-900: #32342b;
  --color-wishing-well-950: #1f2019;
  --color-intergalactic: #51516d;
  --color-intergalactic-50: #f4f4ff;
  --color-intergalactic-100: #e8e9fe;
  --color-intergalactic-200: #d4d5ed;
  --color-intergalactic-300: #bdbeda;
  --color-intergalactic-400: #9d9ebc;
  --color-intergalactic-500: #8282a0;
  --color-intergalactic-600: #676884;
  --color-intergalactic-700: #51516d;
  --color-intergalactic-800: #3f3f55;
  --color-intergalactic-900: #303043;
  --color-intergalactic-950: #1d1d2b;
}