Paspalum Grass

CSS

:root {
  --paspalum-grass: #b9bd97;
  --paspalum-grass-rgb: 185 189 151;
  --paspalum-grass-oklch: oklch(0.785 0.052 112.5);
}

.element {
  color: var(--paspalum-grass);
  background-color: hsl(66 22% 67%);
  border-color: oklch(0.785 0.052 112.5);
}

Tailwind CSS v4

@theme {
  --color-paspalum-grass: #b9bd97;
  --color-paspalum-grass-50: #f4f7e7;
  --color-paspalum-grass-100: #e7ead7;
  --color-paspalum-grass-200: #d3d7be;
  --color-paspalum-grass-300: #b6bb9d;
  --color-paspalum-grass-400: #9ea27f;
  --color-paspalum-grass-500: #868a62;
  --color-paspalum-grass-600: #727553;
  --color-paspalum-grass-700: #5b5d42;
  --color-paspalum-grass-800: #43442f;
  --color-paspalum-grass-900: #2e2f20;
  --color-paspalum-grass-950: #1b1c10;
}

SCSS

$paspalum-grass: #b9bd97;
$paspalum-grass-rgb: 185, 189, 151;
$paspalum-grass-light: mix(#fff, $paspalum-grass, 20%);
$paspalum-grass-dark: mix(#000, $paspalum-grass, 20%);

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