Plum Intended to Lonestar Color Palette

About this palette

Plum Intended to Lonestar is a 5-color dark, cool palette: #5E414C (Plum Intended), #774A8A (Grapes of Italy), #190827 (Shot in the Dark), #1A1E3E (Nightwalker), #4D2526 (Lonestar). It mixes red, purple, brown tones and feels cool overall. The strongest text pairing is #774A8A on #190827 with a contrast ratio of 2.83:1, and 0 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Plum Intended	rgb(94, 65, 76)	hsl(337, 18%, 31%)
Grapes of Italy	rgb(119, 74, 138)	hsl(282, 30%, 42%)
Shot in the Dark	rgb(25, 8, 39)	hsl(273, 66%, 9%)
Nightwalker	rgb(26, 30, 62)	hsl(233, 41%, 17%)
Lonestar	rgb(77, 37, 38)	hsl(358, 35%, 22%)

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.

Color blindness preview

CSS variables

/* Plum Intended to Lonestar — https://swatchly.xyz/palette/5e414c-774a8a-190827-1a1e3e-4d2526 */
:root {
  --plum-intended: #5e414c;
  --grapes-of-italy: #774a8a;
  --shot-in-the-dark: #190827;
  --nightwalker: #1a1e3e;
  --lonestar: #4d2526;
}

Tailwind CSS v4

/* Plum Intended to Lonestar — https://swatchly.xyz/palette/5e414c-774a8a-190827-1a1e3e-4d2526 */
@theme {
  --color-plum-intended: #5e414c;
  --color-plum-intended-50: #fff1f6;
  --color-plum-intended-100: #fbe4ec;
  --color-plum-intended-200: #eacfd9;
  --color-plum-intended-300: #d7b9c4;
  --color-plum-intended-400: #bb9ba6;
  --color-plum-intended-500: #a1808c;
  --color-plum-intended-600: #876873;
  --color-plum-intended-700: #70535e;
  --color-plum-intended-800: #5e414c;
  --color-plum-intended-900: #48323a;
  --color-plum-intended-950: #2f1f25;
  --color-grapes-of-italy: #774a8a;
  --color-grapes-of-italy-50: #fbf1ff;
  --color-grapes-of-italy-100: #f6e3ff;
  --color-grapes-of-italy-200: #eecaff;
  --color-grapes-of-italy-300: #dcb3ee;
  --color-grapes-of-italy-400: #c093d4;
  --color-grapes-of-italy-500: #a778bb;
  --color-grapes-of-italy-600: #8d5fa1;
  --color-grapes-of-italy-700: #774a8a;
  --color-grapes-of-italy-800: #5e386e;
  --color-grapes-of-italy-900: #4a2958;
  --color-grapes-of-italy-950: #30183a;
  --color-shot-in-the-dark: #190827;
  --color-shot-in-the-dark-50: #f8f2ff;
  --color-shot-in-the-dark-100: #f1e5ff;
  --color-shot-in-the-dark-200: #dfd0f0;
  --color-shot-in-the-dark-300: #cab9dd;
  --color-shot-in-the-dark-400: #ab98c0;
  --color-shot-in-the-dark-500: #8d7aa1;
  --color-shot-in-the-dark-600: #6f5d82;
  --color-shot-in-the-dark-700: #554565;
  --color-shot-in-the-dark-800: #3f314c;
  --color-shot-in-the-dark-900: #2c2136;
  --color-shot-in-the-dark-950: #190827;
  --color-nightwalker: #1a1e3e;
  --color-nightwalker-50: #f2f5ff;
  --color-nightwalker-100: #e5eaff;
  --color-nightwalker-200: #cfd6f6;
  --color-nightwalker-300: #b7bfe3;
  --color-nightwalker-400: #979fc6;
  --color-nightwalker-500: #7c84ab;
  --color-nightwalker-600: #636a90;
  --color-nightwalker-700: #4e5476;
  --color-nightwalker-800: #3c4260;
  --color-nightwalker-900: #2e334c;
  --color-nightwalker-950: #1a1e3e;
  --color-lonestar: #4d2526;
  --color-lonestar-50: #fff1f1;
  --color-lonestar-100: #ffe4e3;
  --color-lonestar-200: #f4cccc;
  --color-lonestar-300: #e1b4b3;
  --color-lonestar-400: #c39393;
  --color-lonestar-500: #a87877;
  --color-lonestar-600: #8b5e5e;
  --color-lonestar-700: #714949;
  --color-lonestar-800: #5a3737;
  --color-lonestar-900: #4d2526;
  --color-lonestar-950: #2e1818;
}