Rare Wine

CSS

:root {
  --rare-wine: #3b2736;
  --rare-wine-rgb: 59 39 54;
  --rare-wine-oklch: oklch(0.303 0.039 335.9);
}

.element {
  color: var(--rare-wine);
  background-color: hsl(315 20% 19%);
  border-color: oklch(0.303 0.039 335.9);
}

Tailwind CSS v4

@theme {
  --color-rare-wine: #3b2736;
  --color-rare-wine-50: #fdf1f9;
  --color-rare-wine-100: #f1e3ec;
  --color-rare-wine-200: #e0ceda;
  --color-rare-wine-300: #c5b0be;
  --color-rare-wine-400: #ae96a7;
  --color-rare-wine-500: #977d90;
  --color-rare-wine-600: #806a7a;
  --color-rare-wine-700: #665462;
  --color-rare-wine-800: #4b3e48;
  --color-rare-wine-900: #342a32;
  --color-rare-wine-950: #1f181e;
}

SCSS

$rare-wine: #3b2736;
$rare-wine-rgb: 59, 39, 54;
$rare-wine-light: mix(#fff, $rare-wine, 20%);
$rare-wine-dark: mix(#000, $rare-wine, 20%);

.element {
  color: $rare-wine;
  box-shadow: 0 0 0 2px rgba($rare-wine, 0.35);
}