Beer Garden

CSS

:root {
  --beer-garden: #449933;
  --beer-garden-rgb: 68 153 51;
  --beer-garden-oklch: oklch(0.608 0.161 140.5);
}

.element {
  color: var(--beer-garden);
  background-color: hsl(110 50% 40%);
  border-color: oklch(0.608 0.161 140.5);
}

Tailwind CSS v4

@theme {
  --color-beer-garden: #449933;
  --color-beer-garden-50: #dbffd7;
  --color-beer-garden-100: #c9f6c5;
  --color-beer-garden-200: #ace6a7;
  --color-beer-garden-300: #85cc7f;
  --color-beer-garden-400: #65b556;
  --color-beer-garden-500: #3e9e29;
  --color-beer-garden-600: #368625;
  --color-beer-garden-700: #2b6b1e;
  --color-beer-garden-800: #214f0f;
  --color-beer-garden-900: #16370a;
  --color-beer-garden-950: #072100;
}

SCSS

$beer-garden: #449933;
$beer-garden-rgb: 68, 153, 51;
$beer-garden-light: mix(#fff, $beer-garden, 20%);
$beer-garden-dark: mix(#000, $beer-garden, 20%);

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