Spell Caster

CSS

:root {
  --spell-caster: #4a373e;
  --spell-caster-rgb: 74 55 62;
  --spell-caster-oklch: oklch(0.36 0.029 354.7);
}

.element {
  color: var(--spell-caster);
  background-color: hsl(338 15% 25%);
  border-color: oklch(0.36 0.029 354.7);
}

Tailwind CSS v4

@theme {
  --color-spell-caster: #4a373e;
  --color-spell-caster-50: #fdf2f5;
  --color-spell-caster-100: #f1e4e8;
  --color-spell-caster-200: #dfcfd4;
  --color-spell-caster-300: #c5b2b8;
  --color-spell-caster-400: #ad989f;
  --color-spell-caster-500: #977f87;
  --color-spell-caster-600: #7f6b72;
  --color-spell-caster-700: #66565b;
  --color-spell-caster-800: #4b3e43;
  --color-spell-caster-900: #342b2e;
  --color-spell-caster-950: #1f181b;
}

SCSS

$spell-caster: #4a373e;
$spell-caster-rgb: 74, 55, 62;
$spell-caster-light: mix(#fff, $spell-caster, 20%);
$spell-caster-dark: mix(#000, $spell-caster, 20%);

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