Darth Vader to Scented Spring color palette

2D202DDarth Vader DBA49CPastel Pink 235459Sunken Mystery 6A9378Paying Mantis EFD7F0Scented Spring

About this palette

Darth Vader to Scented Spring is a 5-color muted, cool palette: #2D202D (Darth Vader), #DBA49C (Pastel Pink), #235459 (Sunken Mystery), #6A9378 (Paying Mantis), #EFD7F0 (Scented Spring). It mixes gray, red, turquoise, green, pink tones and feels cool overall. The strongest text pairing is #2D202D on #EFD7F0 with a contrast ratio of 11.54:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Darth Vader	rgb(45, 32, 45)	hsl(300, 17%, 15%)
Pastel Pink	rgb(219, 164, 156)	hsl(8, 47%, 74%)
Sunken Mystery	rgb(35, 84, 89)	hsl(186, 44%, 24%)
Paying Mantis	rgb(106, 147, 120)	hsl(140, 16%, 50%)
Scented Spring	rgb(239, 215, 240)	hsl(298, 45%, 89%)

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.

Aa11.54:1 Very good#2D202D on #EFD7F0
Aa11.54:1 Very good#EFD7F0 on #2D202D
Aa7.23:1 Very good#2D202D on #DBA49C
Aa7.23:1 Very good#DBA49C on #2D202D
Aa6.30:1 Good#235459 on #EFD7F0
Aa6.30:1 Good#EFD7F0 on #235459
Aa4.47:1 Poor#2D202D on #6A9378
Aa4.47:1 Poor#6A9378 on #2D202D

Color blindness preview

CSS variables

/* Darth Vader to Scented Spring — https://swatchly.xyz/palette/2d202d-dba49c-235459-6a9378-efd7f0 */
:root {
  --darth-vader: #2d202d;
  --pastel-pink: #dba49c;
  --sunken-mystery: #235459;
  --paying-mantis: #6a9378;
  --scented-spring: #efd7f0;
}

Tailwind CSS v4

/* Darth Vader to Scented Spring — https://swatchly.xyz/palette/2d202d-dba49c-235459-6a9378-efd7f0 */
@theme {
  --color-darth-vader: #2d202d;
  --color-darth-vader-50: #fbf1fb;
  --color-darth-vader-100: #f2e7f2;
  --color-darth-vader-200: #e0d3df;
  --color-darth-vader-300: #cabbca;
  --color-darth-vader-400: #ac9cab;
  --color-darth-vader-500: #918191;
  --color-darth-vader-600: #786878;
  --color-darth-vader-700: #615361;
  --color-darth-vader-800: #4e424e;
  --color-darth-vader-900: #3f343f;
  --color-darth-vader-950: #2d202d;
  --color-pastel-pink: #dba49c;
  --color-pastel-pink-50: #ffe8e5;
  --color-pastel-pink-100: #ffd7d1;
  --color-pastel-pink-200: #edc0b9;
  --color-pastel-pink-300: #dba49c;
  --color-pastel-pink-400: #bc8880;
  --color-pastel-pink-500: #a26f68;
  --color-pastel-pink-600: #875751;
  --color-pastel-pink-700: #6f443e;
  --color-pastel-pink-800: #5a3530;
  --color-pastel-pink-900: #492924;
  --color-pastel-pink-950: #2f1815;
  --color-sunken-mystery: #235459;
  --color-sunken-mystery-50: #e0fbfe;
  --color-sunken-mystery-100: #d3f2f5;
  --color-sunken-mystery-200: #bae0e4;
  --color-sunken-mystery-300: #a2ccd0;
  --color-sunken-mystery-400: #80afb4;
  --color-sunken-mystery-500: #64959a;
  --color-sunken-mystery-600: #4c7c81;
  --color-sunken-mystery-700: #38666b;
  --color-sunken-mystery-800: #235459;
  --color-sunken-mystery-900: #1c4144;
  --color-sunken-mystery-950: #0e292c;
  --color-paying-mantis: #6a9378;
  --color-paying-mantis-50: #e5fdec;
  --color-paying-mantis-100: #d9f4e1;
  --color-paying-mantis-200: #c2e2cc;
  --color-paying-mantis-300: #a8ccb4;
  --color-paying-mantis-400: #86ae93;
  --color-paying-mantis-500: #6a9378;
  --color-paying-mantis-600: #50785e;
  --color-paying-mantis-700: #3c6049;
  --color-paying-mantis-800: #2b4b37;
  --color-paying-mantis-900: #1f3a29;
  --color-paying-mantis-950: #112418;
  --color-scented-spring: #efd7f0;
  --color-scented-spring-50: #fff9ff;
  --color-scented-spring-100: #fbedfc;
  --color-scented-spring-200: #efd7f0;
  --color-scented-spring-300: #d4c1d5;
  --color-scented-spring-400: #b49fb5;
  --color-scented-spring-500: #988299;
  --color-scented-spring-600: #7b667c;
  --color-scented-spring-700: #624f63;
  --color-scented-spring-800: #4c3c4d;
  --color-scented-spring-900: #3b2d3c;
  --color-scented-spring-950: #251b26;
}