Alpine Meadow

CSS

:root {
  --alpine-meadow: #6aae2e;
  --alpine-meadow-rgb: 106 174 46;
  --alpine-meadow-oklch: oklch(0.681 0.172 133.7);
}

.element {
  color: var(--alpine-meadow);
  background-color: hsl(92 58% 43%);
  border-color: oklch(0.681 0.172 133.7);
}

Tailwind CSS v4

@theme {
  --color-alpine-meadow: #6aae2e;
  --color-alpine-meadow-50: #e0ffd0;
  --color-alpine-meadow-100: #cff6bc;
  --color-alpine-meadow-200: #b3e59b;
  --color-alpine-meadow-300: #8fcb6f;
  --color-alpine-meadow-400: #73b33e;
  --color-alpine-meadow-500: #529c00;
  --color-alpine-meadow-600: #468400;
  --color-alpine-meadow-700: #386a00;
  --color-alpine-meadow-800: #2b4d00;
  --color-alpine-meadow-900: #1d3600;
  --color-alpine-meadow-950: #0d2100;
}

SCSS

$alpine-meadow: #6aae2e;
$alpine-meadow-rgb: 106, 174, 46;
$alpine-meadow-light: mix(#fff, $alpine-meadow, 20%);
$alpine-meadow-dark: mix(#000, $alpine-meadow, 20%);

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