Rolling Glen

CSS

:root {
  --rolling-glen: #a9be9e;
  --rolling-glen-rgb: 169 190 158;
  --rolling-glen-oklch: oklch(0.777 0.05 134.8);
}

.element {
  color: var(--rolling-glen);
  background-color: hsl(99 20% 68%);
  border-color: oklch(0.777 0.05 134.8);
}

Tailwind CSS v4

@theme {
  --color-rolling-glen: #a9be9e;
  --color-rolling-glen-50: #eff9eb;
  --color-rolling-glen-100: #e0ecdc;
  --color-rolling-glen-200: #cbdac5;
  --color-rolling-glen-300: #acbea5;
  --color-rolling-glen-400: #92a588;
  --color-rolling-glen-500: #788e6c;
  --color-rolling-glen-600: #66785c;
  --color-rolling-glen-700: #516049;
  --color-rolling-glen-800: #3c4634;
  --color-rolling-glen-900: #293124;
  --color-rolling-glen-950: #171d13;
}

SCSS

$rolling-glen: #a9be9e;
$rolling-glen-rgb: 169, 190, 158;
$rolling-glen-light: mix(#fff, $rolling-glen, 20%);
$rolling-glen-dark: mix(#000, $rolling-glen, 20%);

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