Darth Vader to Sugar Quill Color Palette

About this palette

Darth Vader to Sugar Quill is a 5-color muted, gradient palette: #2C2325 (Darth Vader), #50413D (Turtle), #A17D78 (Opium), #BB9DA3 (Classy Mauve), #F0E4D7 (Sugar Quill). It mixes gray, red, pink tones and feels warm overall. The strongest text pairing is #2C2325 on #F0E4D7 with a contrast ratio of 12.21:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Darth Vader	rgb(44, 35, 37)	hsl(347, 11%, 15%)
Turtle	rgb(80, 65, 61)	hsl(13, 13%, 28%)
Opium	rgb(161, 125, 120)	hsl(7, 18%, 55%)
Classy Mauve	rgb(187, 157, 163)	hsl(348, 18%, 67%)
Sugar Quill	rgb(240, 228, 215)	hsl(31, 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.

Aa12.21:1 Super#2C2325 on #F0E4D7
Aa12.21:1 Super#F0E4D7 on #2C2325
Aa7.75:1 Very good#50413D on #F0E4D7
Aa7.75:1 Very good#F0E4D7 on #50413D
Aa6.16:1 Good#2C2325 on #BB9DA3
Aa6.16:1 Good#BB9DA3 on #2C2325
Aa4.16:1 Poor#2C2325 on #A17D78
Aa4.16:1 Poor#A17D78 on #2C2325

Color blindness preview

CSS variables

/* Darth Vader to Sugar Quill — https://swatchly.xyz/palette/2c2325-50413d-a17d78-bb9da3-f0e4d7 */
:root {
  --darth-vader: #2c2325;
  --turtle: #50413d;
  --opium: #a17d78;
  --classy-mauve: #bb9da3;
  --sugar-quill: #f0e4d7;
}

Tailwind CSS v4

/* Darth Vader to Sugar Quill — https://swatchly.xyz/palette/2c2325-50413d-a17d78-bb9da3-f0e4d7 */
@theme {
  --color-darth-vader: #2c2325;
  --color-darth-vader-50: #faf3f4;
  --color-darth-vader-100: #f1e9ea;
  --color-darth-vader-200: #ded5d7;
  --color-darth-vader-300: #c8bec0;
  --color-darth-vader-400: #a99ea0;
  --color-darth-vader-500: #8f8487;
  --color-darth-vader-600: #766b6d;
  --color-darth-vader-700: #605658;
  --color-darth-vader-800: #4d4546;
  --color-darth-vader-900: #3e3638;
  --color-darth-vader-950: #2c2325;
  --color-turtle: #50413d;
  --color-turtle-50: #fdf2f0;
  --color-turtle-100: #f4e8e5;
  --color-turtle-200: #e2d4d0;
  --color-turtle-300: #cdbdb9;
  --color-turtle-400: #af9e9a;
  --color-turtle-500: #94837f;
  --color-turtle-600: #7a6965;
  --color-turtle-700: #625450;
  --color-turtle-800: #50413d;
  --color-turtle-900: #3d322f;
  --color-turtle-950: #271f1d;
  --color-opium: #a17d78;
  --color-opium-50: #fff2f0;
  --color-opium-100: #fee5e1;
  --color-opium-200: #eed0cc;
  --color-opium-300: #dab9b4;
  --color-opium-400: #bc9893;
  --color-opium-500: #a17d78;
  --color-opium-600: #85635e;
  --color-opium-700: #6c4d49;
  --color-opium-800: #563b37;
  --color-opium-900: #432c2a;
  --color-opium-950: #2b1b18;
  --color-classy-mauve: #bb9da3;
  --color-classy-mauve-50: #fff3f5;
  --color-classy-mauve-100: #fbe8ec;
  --color-classy-mauve-200: #ebd4d8;
  --color-classy-mauve-300: #d7bdc2;
  --color-classy-mauve-400: #bb9da3;
  --color-classy-mauve-500: #9e8187;
  --color-classy-mauve-600: #82666c;
  --color-classy-mauve-700: #685055;
  --color-classy-mauve-800: #523d41;
  --color-classy-mauve-900: #402e32;
  --color-classy-mauve-950: #281b1e;
  --color-sugar-quill: #f0e4d7;
  --color-sugar-quill-50: #f7f0e8;
  --color-sugar-quill-100: #f0e4d7;
  --color-sugar-quill-200: #dbd2c8;
  --color-sugar-quill-300: #c6bcb1;
  --color-sugar-quill-400: #a89d91;
  --color-sugar-quill-500: #8d8377;
  --color-sugar-quill-600: #73695e;
  --color-sugar-quill-700: #5d5449;
  --color-sugar-quill-800: #494138;
  --color-sugar-quill-900: #38322a;
  --color-sugar-quill-950: #231e19;
}