Mow the Lawn

CSS

:root {
  --mow-the-lawn: #a9b49a;
  --mow-the-lawn-rgb: 169 180 154;
  --mow-the-lawn-oklch: oklch(0.754 0.038 126);
}

.element {
  color: var(--mow-the-lawn);
  background-color: hsl(85 15% 65%);
  border-color: oklch(0.754 0.038 126);
}

Tailwind CSS v4

@theme {
  --color-mow-the-lawn: #a9b49a;
  --color-mow-the-lawn-50: #f2f7ec;
  --color-mow-the-lawn-100: #e4ebdd;
  --color-mow-the-lawn-200: #cfd8c6;
  --color-mow-the-lawn-300: #b2bba7;
  --color-mow-the-lawn-400: #99a38b;
  --color-mow-the-lawn-500: #808b70;
  --color-mow-the-lawn-600: #6c765f;
  --color-mow-the-lawn-700: #565e4c;
  --color-mow-the-lawn-800: #3f4536;
  --color-mow-the-lawn-900: #2c3025;
  --color-mow-the-lawn-950: #191c14;
}

SCSS

$mow-the-lawn: #a9b49a;
$mow-the-lawn-rgb: 169, 180, 154;
$mow-the-lawn-light: mix(#fff, $mow-the-lawn, 20%);
$mow-the-lawn-dark: mix(#000, $mow-the-lawn, 20%);

.element {
  color: $mow-the-lawn;
  box-shadow: 0 0 0 2px rgba($mow-the-lawn, 0.35);
}