Track Green

CSS

:root {
  --track-green: #849e88;
  --track-green-rgb: 132 158 136;
  --track-green-oklch: oklch(0.673 0.043 149.5);
}

.element {
  color: var(--track-green);
  background-color: hsl(129 12% 57%);
  border-color: oklch(0.673 0.043 149.5);
}

Tailwind CSS v4

@theme {
  --color-track-green: #849e88;
  --color-track-green-50: #edf9ef;
  --color-track-green-100: #deece1;
  --color-track-green-200: #c7dacb;
  --color-track-green-300: #a8beac;
  --color-track-green-400: #8da691;
  --color-track-green-500: #728f77;
  --color-track-green-600: #617965;
  --color-track-green-700: #4d6150;
  --color-track-green-800: #39473a;
  --color-track-green-900: #273128;
  --color-track-green-950: #151d16;
}

SCSS

$track-green: #849e88;
$track-green-rgb: 132, 158, 136;
$track-green-light: mix(#fff, $track-green, 20%);
$track-green-dark: mix(#000, $track-green, 20%);

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