Darth Vader to Amorous color palette

2D2126Darth Vader 70485ANocturne Red D5B2ACBorlotti Bean F9E0F4Bunny Tail 957B95Amorous

About this palette

Darth Vader to Amorous is a 5-color muted, warm, vintage palette: #2D2126 (Darth Vader), #70485A (Nocturne Red), #D5B2AC (Borlotti Bean), #F9E0F4 (Bunny Tail), #957B95 (Amorous). It mixes gray, red, pink tones and feels warm overall. The strongest text pairing is #2D2126 on #F9E0F4 with a contrast ratio of 12.52:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Darth Vader	rgb(45, 33, 38)	hsl(335, 15%, 15%)
Nocturne Red	rgb(112, 72, 90)	hsl(333, 22%, 36%)
Borlotti Bean	rgb(213, 178, 172)	hsl(9, 33%, 75%)
Bunny Tail	rgb(249, 224, 244)	hsl(312, 68%, 93%)
Amorous	rgb(149, 123, 149)	hsl(300, 11%, 53%)

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.

Aa12.52:1 Super#2D2126 on #F9E0F4
Aa12.52:1 Super#F9E0F4 on #2D2126
Aa7.95:1 Very good#2D2126 on #D5B2AC
Aa7.95:1 Very good#D5B2AC on #2D2126
Aa6.15:1 Good#70485A on #F9E0F4
Aa6.15:1 Good#F9E0F4 on #70485A
Aa4.09:1 Poor#2D2126 on #957B95
Aa4.09:1 Poor#957B95 on #2D2126

Color blindness preview

CSS variables

/* Darth Vader to Amorous — https://swatchly.xyz/palette/2d2126-70485a-d5b2ac-f9e0f4-957b95 */
:root {
  --darth-vader: #2d2126;
  --nocturne-red: #70485a;
  --borlotti-bean: #d5b2ac;
  --bunny-tail: #f9e0f4;
  --amorous: #957b95;
}

Tailwind CSS v4

/* Darth Vader to Amorous — https://swatchly.xyz/palette/2d2126-70485a-d5b2ac-f9e0f4-957b95 */
@theme {
  --color-darth-vader: #2d2126;
  --color-darth-vader-50: #fcf2f6;
  --color-darth-vader-100: #f2e8ec;
  --color-darth-vader-200: #e0d4d8;
  --color-darth-vader-300: #cabdc2;
  --color-darth-vader-400: #ac9da3;
  --color-darth-vader-500: #928389;
  --color-darth-vader-600: #786a6f;
  --color-darth-vader-700: #62545a;
  --color-darth-vader-800: #4e4348;
  --color-darth-vader-900: #3f3539;
  --color-darth-vader-950: #2d2126;
  --color-nocturne-red: #70485a;
  --color-nocturne-red-50: #fff1f6;
  --color-nocturne-red-100: #ffe2ee;
  --color-nocturne-red-200: #f0ccdb;
  --color-nocturne-red-300: #dcb4c5;
  --color-nocturne-red-400: #bf94a6;
  --color-nocturne-red-500: #a4788b;
  --color-nocturne-red-600: #885e71;
  --color-nocturne-red-700: #70485a;
  --color-nocturne-red-800: #583846;
  --color-nocturne-red-900: #452a36;
  --color-nocturne-red-950: #2c1922;
  --color-borlotti-bean: #d5b2ac;
  --color-borlotti-bean-50: #ffeeeb;
  --color-borlotti-bean-100: #f9e1dd;
  --color-borlotti-bean-200: #e7ccc7;
  --color-borlotti-bean-300: #d5b2ac;
  --color-borlotti-bean-400: #b5948f;
  --color-borlotti-bean-500: #9a7a74;
  --color-borlotti-bean-600: #7f615c;
  --color-borlotti-bean-700: #674c47;
  --color-borlotti-bean-800: #533b37;
  --color-borlotti-bean-900: #412d2a;
  --color-borlotti-bean-950: #2a1b19;
  --color-bunny-tail: #f9e0f4;
  --color-bunny-tail-50: #fceef9;
  --color-bunny-tail-100: #f9e0f4;
  --color-bunny-tail-200: #e2cfde;
  --color-bunny-tail-300: #cdb8c9;
  --color-bunny-tail-400: #af98aa;
  --color-bunny-tail-500: #947d8f;
  --color-bunny-tail-600: #796475;
  --color-bunny-tail-700: #614e5e;
  --color-bunny-tail-800: #4d3c4a;
  --color-bunny-tail-900: #3c2e39;
  --color-bunny-tail-950: #261c24;
  --color-amorous: #957b95;
  --color-amorous-50: #ffefff;
  --color-amorous-100: #f6e4f6;
  --color-amorous-200: #e4cfe4;
  --color-amorous-300: #cfb7cf;
  --color-amorous-400: #b197b0;
  --color-amorous-500: #957b95;
  --color-amorous-600: #7a617a;
  --color-amorous-700: #624c62;
  --color-amorous-800: #4e3a4e;
  --color-amorous-900: #3c2c3c;
  --color-amorous-950: #261a26;
}