Black-Hearted to Garlic Toast color palette

411B23Black-Hearted 504768Nightly Walk 008D8DDark Cyan B1AAF6Wondrous Wisteria DBDA8BGarlic Toast

About this palette

Black-Hearted to Garlic Toast is a 5-color cool, vintage palette: #411B23 (Black-Hearted), #504768 (Nightly Walk), #008D8D (Dark Cyan), #B1AAF6 (Wondrous Wisteria), #DBDA8B (Garlic Toast). It mixes brown, purple, turquoise, yellow tones and feels cool overall. The strongest text pairing is #411B23 on #DBDA8B with a contrast ratio of 10.25:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Black-Hearted	rgb(65, 27, 35)	hsl(347, 41%, 18%)
Nightly Walk	rgb(80, 71, 104)	hsl(256, 19%, 34%)
Dark Cyan	rgb(0, 141, 141)	hsl(180, 100%, 28%)
Wondrous Wisteria	rgb(177, 170, 246)	hsl(246, 81%, 82%)
Garlic Toast	rgb(219, 218, 139)	hsl(59, 53%, 70%)

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.25:1 Very good#411B23 on #DBDA8B
Aa10.25:1 Very good#DBDA8B on #411B23
Aa7.08:1 Very good#411B23 on #B1AAF6
Aa7.08:1 Very good#B1AAF6 on #411B23
Aa5.90:1 Good#504768 on #DBDA8B
Aa5.90:1 Good#DBDA8B on #504768
Aa4.07:1 Poor#504768 on #B1AAF6
Aa4.07:1 Poor#B1AAF6 on #504768

Color blindness preview

CSS variables

/* Black-Hearted to Garlic Toast — https://swatchly.xyz/palette/411b23-504768-008d8d-b1aaf6-dbda8b */
:root {
  --black-hearted: #411b23;
  --nightly-walk: #504768;
  --dark-cyan: #008d8d;
  --wondrous-wisteria: #b1aaf6;
  --garlic-toast: #dbda8b;
}

Tailwind CSS v4

/* Black-Hearted to Garlic Toast — https://swatchly.xyz/palette/411b23-504768-008d8d-b1aaf6-dbda8b */
@theme {
  --color-black-hearted: #411b23;
  --color-black-hearted-50: #fff1f3;
  --color-black-hearted-100: #ffe3e7;
  --color-black-hearted-200: #f3ccd2;
  --color-black-hearted-300: #dfb4ba;
  --color-black-hearted-400: #c09198;
  --color-black-hearted-500: #a2747b;
  --color-black-hearted-600: #84585f;
  --color-black-hearted-700: #684248;
  --color-black-hearted-800: #4f2f35;
  --color-black-hearted-900: #411b23;
  --color-black-hearted-950: #231215;
  --color-nightly-walk: #504768;
  --color-nightly-walk-50: #f6f3ff;
  --color-nightly-walk-100: #ede7ff;
  --color-nightly-walk-200: #d8d1ef;
  --color-nightly-walk-300: #c0b8da;
  --color-nightly-walk-400: #a097bb;
  --color-nightly-walk-500: #837a9e;
  --color-nightly-walk-600: #675f80;
  --color-nightly-walk-700: #504768;
  --color-nightly-walk-800: #3e3751;
  --color-nightly-walk-900: #302a3f;
  --color-nightly-walk-950: #1d1928;
  --color-dark-cyan: #008d8d;
  --color-dark-cyan-50: #cafffe;
  --color-dark-cyan-100: #b5f5f4;
  --color-dark-cyan-200: #93e2e1;
  --color-dark-cyan-300: #6fcbca;
  --color-dark-cyan-400: #3dabaa;
  --color-dark-cyan-500: #008d8d;
  --color-dark-cyan-600: #007272;
  --color-dark-cyan-700: #005b5b;
  --color-dark-cyan-800: #004747;
  --color-dark-cyan-900: #003838;
  --color-dark-cyan-950: #002424;
  --color-wondrous-wisteria: #b1aaf6;
  --color-wondrous-wisteria-50: #ededff;
  --color-wondrous-wisteria-100: #e1dfff;
  --color-wondrous-wisteria-200: #cac6ff;
  --color-wondrous-wisteria-300: #b1aaf6;
  --color-wondrous-wisteria-400: #948dd5;
  --color-wondrous-wisteria-500: #7c74bb;
  --color-wondrous-wisteria-600: #645b9f;
  --color-wondrous-wisteria-700: #504784;
  --color-wondrous-wisteria-800: #3f376d;
  --color-wondrous-wisteria-900: #312b59;
  --color-wondrous-wisteria-950: #1e193a;
  --color-garlic-toast: #dbda8b;
  --color-garlic-toast-50: #f6f7cb;
  --color-garlic-toast-100: #ededbc;
  --color-garlic-toast-200: #dbda8b;
  --color-garlic-toast-300: #c4c381;
  --color-garlic-toast-400: #a6a45a;
  --color-garlic-toast-500: #8b893b;
  --color-garlic-toast-600: #716f20;
  --color-garlic-toast-700: #5a5808;
  --color-garlic-toast-800: #474500;
  --color-garlic-toast-900: #373500;
  --color-garlic-toast-950: #222100;
}