Whiskey Barrel

CSS

:root {
  --whiskey-barrel: #85705f;
  --whiskey-barrel-rgb: 133 112 95;
  --whiskey-barrel-oklch: oklch(0.56 0.037 60.9);
}

.element {
  color: var(--whiskey-barrel);
  background-color: hsl(27 17% 45%);
  border-color: oklch(0.56 0.037 60.9);
}

Tailwind CSS v4

@theme {
  --color-whiskey-barrel: #85705f;
  --color-whiskey-barrel-50: #fdf3eb;
  --color-whiskey-barrel-100: #f1e6dc;
  --color-whiskey-barrel-200: #e0d1c5;
  --color-whiskey-barrel-300: #c6b4a5;
  --color-whiskey-barrel-400: #af9a89;
  --color-whiskey-barrel-500: #99816e;
  --color-whiskey-barrel-600: #816d5d;
  --color-whiskey-barrel-700: #67574a;
  --color-whiskey-barrel-800: #4c4036;
  --color-whiskey-barrel-900: #352c25;
  --color-whiskey-barrel-950: #201913;
}

SCSS

$whiskey-barrel: #85705f;
$whiskey-barrel-rgb: 133, 112, 95;
$whiskey-barrel-light: mix(#fff, $whiskey-barrel, 20%);
$whiskey-barrel-dark: mix(#000, $whiskey-barrel, 20%);

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