Vibrant Vine to Mature Cognac Color Palette

About this palette

Vibrant Vine to Mature Cognac is a 4-color dark, warm palette: #54323D (Vibrant Vine), #1A0002 (Dwarf Fortress), #3F1457 (Plunged Into Darkness), #94483C (Mature Cognac). It mixes red, black, purple tones and feels warm overall. The strongest text pairing is #1A0002 on #94483C with a contrast ratio of 3.11:1, and 0 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Vibrant Vine	rgb(84, 50, 61)	hsl(341, 25%, 26%)
Dwarf Fortress	rgb(26, 0, 2)	hsl(355, 100%, 5%)
Plunged Into Darkness	rgb(63, 20, 87)	hsl(279, 63%, 21%)
Mature Cognac	rgb(148, 72, 60)	hsl(8, 42%, 41%)

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.

Aa3.11:1 Poor#1A0002 on #94483C
Aa3.11:1 Poor#94483C on #1A0002

Color blindness preview

CSS variables

/* Vibrant Vine to Mature Cognac — https://swatchly.xyz/palette/54323d-1a0002-3f1457-94483c */
:root {
  --vibrant-vine: #54323d;
  --dwarf-fortress: #1a0002;
  --plunged-into-darkness: #3f1457;
  --mature-cognac: #94483c;
}

Tailwind CSS v4

/* Vibrant Vine to Mature Cognac — https://swatchly.xyz/palette/54323d-1a0002-3f1457-94483c */
@theme {
  --color-vibrant-vine: #54323d;
  --color-vibrant-vine-50: #fff1f5;
  --color-vibrant-vine-100: #ffe3ea;
  --color-vibrant-vine-200: #eeced7;
  --color-vibrant-vine-300: #d9b5bf;
  --color-vibrant-vine-400: #bb939f;
  --color-vibrant-vine-500: #9e7783;
  --color-vibrant-vine-600: #815c68;
  --color-vibrant-vine-700: #674651;
  --color-vibrant-vine-800: #54323d;
  --color-vibrant-vine-900: #3f272f;
  --color-vibrant-vine-950: #27171c;
  --color-dwarf-fortress: #1a0002;
  --color-dwarf-fortress-50: #fff1f1;
  --color-dwarf-fortress-100: #ffe4e3;
  --color-dwarf-fortress-200: #f2cdcc;
  --color-dwarf-fortress-300: #deb5b4;
  --color-dwarf-fortress-400: #c19594;
  --color-dwarf-fortress-500: #a07473;
  --color-dwarf-fortress-600: #7e5656;
  --color-dwarf-fortress-700: #5f3d3d;
  --color-dwarf-fortress-800: #432828;
  --color-dwarf-fortress-900: #2b1818;
  --color-dwarf-fortress-950: #1a0002;
  --color-plunged-into-darkness: #3f1457;
  --color-plunged-into-darkness-50: #f9f2ff;
  --color-plunged-into-darkness-100: #f3e4ff;
  --color-plunged-into-darkness-200: #e8c9ff;
  --color-plunged-into-darkness-300: #d5aff1;
  --color-plunged-into-darkness-400: #b68cd4;
  --color-plunged-into-darkness-500: #9a6fb8;
  --color-plunged-into-darkness-600: #7d5499;
  --color-plunged-into-darkness-700: #633e7c;
  --color-plunged-into-darkness-800: #4d2d62;
  --color-plunged-into-darkness-900: #3f1457;
  --color-plunged-into-darkness-950: #24112f;
  --color-mature-cognac: #94483c;
  --color-mature-cognac-50: #fff2ef;
  --color-mature-cognac-100: #ffe2dc;
  --color-mature-cognac-200: #ffc3b8;
  --color-mature-cognac-300: #f1a598;
  --color-mature-cognac-400: #d28274;
  --color-mature-cognac-500: #b36457;
  --color-mature-cognac-600: #94483c;
  --color-mature-cognac-700: #78372d;
  --color-mature-cognac-800: #612820;
  --color-mature-cognac-900: #4d1d16;
  --color-mature-cognac-950: #32100b;
}