Alpine Green

CSS

:root {
  --alpine-green: #005f50;
  --alpine-green-rgb: 0 95 80;
  --alpine-green-oklch: oklch(0.434 0.08 177);
}

.element {
  color: var(--alpine-green);
  background-color: hsl(171 100% 19%);
  border-color: oklch(0.434 0.08 177);
}

Tailwind CSS v4

@theme {
  --color-alpine-green: #005f50;
  --color-alpine-green-50: #defdf5;
  --color-alpine-green-100: #ccf1e8;
  --color-alpine-green-200: #b0e0d5;
  --color-alpine-green-300: #8ac5b8;
  --color-alpine-green-400: #67ae9d;
  --color-alpine-green-500: #419885;
  --color-alpine-green-600: #388071;
  --color-alpine-green-700: #2d675a;
  --color-alpine-green-800: #204b41;
  --color-alpine-green-900: #15342d;
  --color-alpine-green-950: #06201a;
}

SCSS

$alpine-green: #005f50;
$alpine-green-rgb: 0, 95, 80;
$alpine-green-light: mix(#fff, $alpine-green, 20%);
$alpine-green-dark: mix(#000, $alpine-green, 20%);

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