Meadow Grass

CSS

:root {
  --meadow-grass: #c1d6b1;
  --meadow-grass-rgb: 193 214 177;
  --meadow-grass-oklch: oklch(0.851 0.055 131.7);
}

.element {
  color: var(--meadow-grass);
  background-color: hsl(94 31% 77%);
  border-color: oklch(0.851 0.055 131.7);
}

Tailwind CSS v4

@theme {
  --color-meadow-grass: #c1d6b1;
  --color-meadow-grass-50: #eff9e9;
  --color-meadow-grass-100: #e1ecda;
  --color-meadow-grass-200: #cbdac2;
  --color-meadow-grass-300: #acbea2;
  --color-meadow-grass-400: #93a684;
  --color-meadow-grass-500: #798e68;
  --color-meadow-grass-600: #667858;
  --color-meadow-grass-700: #526046;
  --color-meadow-grass-800: #3c4632;
  --color-meadow-grass-900: #293122;
  --color-meadow-grass-950: #171d11;
}

SCSS

$meadow-grass: #c1d6b1;
$meadow-grass-rgb: 193, 214, 177;
$meadow-grass-light: mix(#fff, $meadow-grass, 20%);
$meadow-grass-dark: mix(#000, $meadow-grass, 20%);

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