Enchantress

CSS

:root {
  --enchantress: #5d3a47;
  --enchantress-rgb: 93 58 71;
  --enchantress-oklch: oklch(0.394 0.053 355.9);
}

.element {
  color: var(--enchantress);
  background-color: hsl(338 23% 30%);
  border-color: oklch(0.394 0.053 355.9);
}

Tailwind CSS v4

@theme {
  --color-enchantress: #5d3a47;
  --color-enchantress-50: #ffeff5;
  --color-enchantress-100: #f8e1e8;
  --color-enchantress-200: #e8cbd4;
  --color-enchantress-300: #cfadb7;
  --color-enchantress-400: #b9929f;
  --color-enchantress-500: #a37887;
  --color-enchantress-600: #8a6672;
  --color-enchantress-700: #6f515c;
  --color-enchantress-800: #513b44;
  --color-enchantress-900: #39282f;
  --color-enchantress-950: #23161b;
}

SCSS

$enchantress: #5d3a47;
$enchantress-rgb: 93, 58, 71;
$enchantress-light: mix(#fff, $enchantress, 20%);
$enchantress-dark: mix(#000, $enchantress, 20%);

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