Alpine Herbs

CSS

:root {
  --alpine-herbs: #449955;
  --alpine-herbs-rgb: 68 153 85;
  --alpine-herbs-oklch: oklch(0.613 0.131 148);
}

.element {
  color: var(--alpine-herbs);
  background-color: hsl(132 38% 43%);
  border-color: oklch(0.613 0.131 148);
}

Tailwind CSS v4

@theme {
  --color-alpine-herbs: #449955;
  --color-alpine-herbs-50: #dcffe2;
  --color-alpine-herbs-100: #caf5d1;
  --color-alpine-herbs-200: #ade5b7;
  --color-alpine-herbs-300: #85ca94;
  --color-alpine-herbs-400: #64b371;
  --color-alpine-herbs-500: #3c9d51;
  --color-alpine-herbs-600: #348546;
  --color-alpine-herbs-700: #2a6a37;
  --color-alpine-herbs-800: #1f4e25;
  --color-alpine-herbs-900: #153619;
  --color-alpine-herbs-950: #062109;
}

SCSS

$alpine-herbs: #449955;
$alpine-herbs-rgb: 68, 153, 85;
$alpine-herbs-light: mix(#fff, $alpine-herbs, 20%);
$alpine-herbs-dark: mix(#000, $alpine-herbs, 20%);

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