Sultry Spell

CSS

:root {
  --sultry-spell: #716563;
  --sultry-spell-rgb: 113 101 99;
  --sultry-spell-oklch: oklch(0.517 0.016 29);
}

.element {
  color: var(--sultry-spell);
  background-color: hsl(9 7% 42%);
  border-color: oklch(0.517 0.016 29);
}

Tailwind CSS v4

@theme {
  --color-sultry-spell: #716563;
  --color-sultry-spell-50: #faf4f2;
  --color-sultry-spell-100: #ede6e5;
  --color-sultry-spell-200: #dbd2d0;
  --color-sultry-spell-300: #bfb5b2;
  --color-sultry-spell-400: #a89b99;
  --color-sultry-spell-500: #908380;
  --color-sultry-spell-600: #7a6e6d;
  --color-sultry-spell-700: #625857;
  --color-sultry-spell-800: #48403f;
  --color-sultry-spell-900: #322c2c;
  --color-sultry-spell-950: #1e1919;
}

SCSS

$sultry-spell: #716563;
$sultry-spell-rgb: 113, 101, 99;
$sultry-spell-light: mix(#fff, $sultry-spell, 20%);
$sultry-spell-dark: mix(#000, $sultry-spell, 20%);

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