Rain Barrel

CSS

:root {
  --rain-barrel: #8b795f;
  --rain-barrel-rgb: 139 121 95;
  --rain-barrel-oklch: oklch(0.586 0.044 76.8);
}

.element {
  color: var(--rain-barrel);
  background-color: hsl(35 19% 46%);
  border-color: oklch(0.586 0.044 76.8);
}

Tailwind CSS v4

@theme {
  --color-rain-barrel: #8b795f;
  --color-rain-barrel-50: #fcf4e8;
  --color-rain-barrel-100: #f0e7d8;
  --color-rain-barrel-200: #dfd2c0;
  --color-rain-barrel-300: #c4b59f;
  --color-rain-barrel-400: #ad9c82;
  --color-rain-barrel-500: #978366;
  --color-rain-barrel-600: #806f56;
  --color-rain-barrel-700: #665945;
  --color-rain-barrel-800: #4b4032;
  --color-rain-barrel-900: #342c22;
  --color-rain-barrel-950: #201911;
}

SCSS

$rain-barrel: #8b795f;
$rain-barrel-rgb: 139, 121, 95;
$rain-barrel-light: mix(#fff, $rain-barrel, 20%);
$rain-barrel-dark: mix(#000, $rain-barrel, 20%);

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