Grass Valley

CSS

:root {
  --grass-valley: #f4f7ee;
  --grass-valley-rgb: 244 247 238;
  --grass-valley-oklch: oklch(0.971 0.012 121.7);
}

.element {
  color: var(--grass-valley);
  background-color: hsl(80 36% 95%);
  border-color: oklch(0.971 0.012 121.7);
}

Tailwind CSS v4

@theme {
  --color-grass-valley: #f4f7ee;
  --color-grass-valley-50: #f4f6f2;
  --color-grass-valley-100: #e7e9e4;
  --color-grass-valley-200: #d3d5cf;
  --color-grass-valley-300: #b6b8b2;
  --color-grass-valley-400: #9da098;
  --color-grass-valley-500: #85887f;
  --color-grass-valley-600: #70736b;
  --color-grass-valley-700: #5a5c56;
  --color-grass-valley-800: #42433e;
  --color-grass-valley-900: #2d2e2b;
  --color-grass-valley-950: #1a1b18;
}

SCSS

$grass-valley: #f4f7ee;
$grass-valley-rgb: 244, 247, 238;
$grass-valley-light: mix(#fff, $grass-valley, 20%);
$grass-valley-dark: mix(#000, $grass-valley, 20%);

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