Grass Cloth

CSS

:root {
  --grass-cloth: #b8b97e;
  --grass-cloth-rgb: 184 185 126;
  --grass-cloth-oklch: oklch(0.771 0.079 108.9);
}

.element {
  color: var(--grass-cloth);
  background-color: hsl(61 30% 61%);
  border-color: oklch(0.771 0.079 108.9);
}

Tailwind CSS v4

@theme {
  --color-grass-cloth: #b8b97e;
  --color-grass-cloth-50: #f6f8de;
  --color-grass-cloth-100: #e8ebcd;
  --color-grass-cloth-200: #d5d8b2;
  --color-grass-cloth-300: #b9bc8d;
  --color-grass-cloth-400: #a2a36c;
  --color-grass-cloth-500: #8a8a4a;
  --color-grass-cloth-600: #757540;
  --color-grass-cloth-700: #5d5e33;
  --color-grass-cloth-800: #454423;
  --color-grass-cloth-900: #302f17;
  --color-grass-cloth-950: #1c1c08;
}

SCSS

$grass-cloth: #b8b97e;
$grass-cloth-rgb: 184, 185, 126;
$grass-cloth-light: mix(#fff, $grass-cloth, 20%);
$grass-cloth-dark: mix(#000, $grass-cloth, 20%);

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