Darth Vader to Iron Maiden color palette

27232CDarth Vader 483E4CItalian Grape 71677ARum 96859EHatoba Pigeon BFB1CDVintage Bloom DCD3E3Iron Maiden

Open in generator Export PNG, PDF, ASE…

About this palette

Darth Vader to Iron Maiden is a 6-color muted, gradient palette: #27232C (Darth Vader), #483E4C (Italian Grape), #71677A (Rum), #96859E (Hatoba Pigeon), #BFB1CD (Vintage Bloom), #DCD3E3 (Iron Maiden). It mixes gray, purple tones and feels cool overall. The strongest text pairing is #27232C on #DCD3E3 with a contrast ratio of 10.62:1, and 5 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Darth Vader	rgb(39, 35, 44)	hsl(267, 11%, 15%)
Italian Grape	rgb(72, 62, 76)	hsl(283, 10%, 27%)
Rum	rgb(113, 103, 122)	hsl(272, 8%, 44%)
Hatoba Pigeon	rgb(150, 133, 158)	hsl(281, 11%, 57%)
Vintage Bloom	rgb(191, 177, 205)	hsl(270, 22%, 75%)
Iron Maiden	rgb(220, 211, 227)	hsl(274, 22%, 86%)

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.62:1 Very good#27232C on #DCD3E3
Aa10.62:1 Very good#DCD3E3 on #27232C
Aa7.62:1 Very good#27232C on #BFB1CD
Aa7.62:1 Very good#BFB1CD on #27232C
Aa6.99:1 Good#483E4C on #DCD3E3
Aa6.99:1 Good#DCD3E3 on #483E4C
Aa5.02:1 Good#483E4C on #BFB1CD
Aa5.02:1 Good#BFB1CD on #483E4C

Color blindness preview

CSS variables

/* Darth Vader to Iron Maiden — https://swatchly.xyz/palette/27232c-483e4c-71677a-96859e-bfb1cd-dcd3e3 */
:root {
  --darth-vader: #27232c;
  --italian-grape: #483e4c;
  --rum: #71677a;
  --hatoba-pigeon: #96859e;
  --vintage-bloom: #bfb1cd;
  --iron-maiden: #dcd3e3;
}

Tailwind CSS v4

/* Darth Vader to Iron Maiden — https://swatchly.xyz/palette/27232c-483e4c-71677a-96859e-bfb1cd-dcd3e3 */
@theme {
  --color-darth-vader: #27232c;
  --color-darth-vader-50: #f6f4fa;
  --color-darth-vader-100: #ede9f1;
  --color-darth-vader-200: #d9d5de;
  --color-darth-vader-300: #c3bfc9;
  --color-darth-vader-400: #a49faa;
  --color-darth-vader-500: #8a8590;
  --color-darth-vader-600: #706c76;
  --color-darth-vader-700: #5b5660;
  --color-darth-vader-800: #48454d;
  --color-darth-vader-900: #3a363e;
  --color-darth-vader-950: #27232c;
  --color-italian-grape: #483e4c;
  --color-italian-grape-50: #f9f2fc;
  --color-italian-grape-100: #f0e8f3;
  --color-italian-grape-200: #ddd4e0;
  --color-italian-grape-300: #c7bdcb;
  --color-italian-grape-400: #a89dad;
  --color-italian-grape-500: #8d8191;
  --color-italian-grape-600: #726776;
  --color-italian-grape-700: #5b515f;
  --color-italian-grape-800: #483e4c;
  --color-italian-grape-900: #37303a;
  --color-italian-grape-950: #221d24;
  --color-rum: #71677a;
  --color-rum-50: #f8f2fe;
  --color-rum-100: #efe8f5;
  --color-rum-200: #dcd4e4;
  --color-rum-300: #c6bccf;
  --color-rum-400: #a79db0;
  --color-rum-500: #8c8195;
  --color-rum-600: #71677a;
  --color-rum-700: #5a5162;
  --color-rum-800: #463f4d;
  --color-rum-900: #36303c;
  --color-rum-950: #221d26;
  --color-hatoba-pigeon: #96859e;
  --color-hatoba-pigeon-50: #fbf3ff;
  --color-hatoba-pigeon-100: #f4e9f9;
  --color-hatoba-pigeon-200: #e2d5e9;
  --color-hatoba-pigeon-300: #cebfd5;
  --color-hatoba-pigeon-400: #b0a0b8;
  --color-hatoba-pigeon-500: #96859e;
  --color-hatoba-pigeon-600: #7a6a82;
  --color-hatoba-pigeon-700: #615368;
  --color-hatoba-pigeon-800: #4c3f52;
  --color-hatoba-pigeon-900: #3b3040;
  --color-hatoba-pigeon-950: #241d28;
  --color-vintage-bloom: #bfb1cd;
  --color-vintage-bloom-50: #f5ecfd;
  --color-vintage-bloom-100: #eae0f4;
  --color-vintage-bloom-200: #d5cae1;
  --color-vintage-bloom-300: #bfb1cd;
  --color-vintage-bloom-400: #a194ae;
  --color-vintage-bloom-500: #877a94;
  --color-vintage-bloom-600: #6e627a;
  --color-vintage-bloom-700: #584d63;
  --color-vintage-bloom-800: #463c50;
  --color-vintage-bloom-900: #372f3f;
  --color-vintage-bloom-950: #221c28;
  --color-iron-maiden: #dcd3e3;
  --color-iron-maiden-50: #f8f3fc;
  --color-iron-maiden-100: #eee8f2;
  --color-iron-maiden-200: #dcd3e3;
  --color-iron-maiden-300: #c5bdcb;
  --color-iron-maiden-400: #a69eac;
  --color-iron-maiden-500: #8a8291;
  --color-iron-maiden-600: #706876;
  --color-iron-maiden-700: #59525e;
  --color-iron-maiden-800: #46404a;
  --color-iron-maiden-900: #36303a;
  --color-iron-maiden-950: #211e24;
}