Slippery Stone

CSS

:root {
  --slippery-stone: #8d6a4a;
  --slippery-stone-rgb: 141 106 74;
  --slippery-stone-oklch: oklch(0.552 0.064 63.3);
}

.element {
  color: var(--slippery-stone);
  background-color: hsl(29 31% 42%);
  border-color: oklch(0.552 0.064 63.3);
}

Tailwind CSS v4

@theme {
  --color-slippery-stone: #8d6a4a;
  --color-slippery-stone-50: #fff2e2;
  --color-slippery-stone-100: #f7e4d2;
  --color-slippery-stone-200: #e8cfb8;
  --color-slippery-stone-300: #cfb195;
  --color-slippery-stone-400: #ba9777;
  --color-slippery-stone-500: #a57d59;
  --color-slippery-stone-600: #8b6a4c;
  --color-slippery-stone-700: #70553c;
  --color-slippery-stone-800: #533d2b;
  --color-slippery-stone-900: #3a2a1d;
  --color-slippery-stone-950: #24180d;
}

SCSS

$slippery-stone: #8d6a4a;
$slippery-stone-rgb: 141, 106, 74;
$slippery-stone-light: mix(#fff, $slippery-stone, 20%);
$slippery-stone-dark: mix(#000, $slippery-stone, 20%);

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