Dead Grass

CSS

:root {
  --dead-grass: #e4dc8a;
  --dead-grass-rgb: 228 220 138;
  --dead-grass-oklch: oklch(0.883 0.103 103.5);
}

.element {
  color: var(--dead-grass);
  background-color: hsl(55 63% 72%);
  border-color: oklch(0.883 0.103 103.5);
}

Tailwind CSS v4

@theme {
  --color-dead-grass: #e4dc8a;
  --color-dead-grass-50: #f9f8d6;
  --color-dead-grass-100: #ecebc3;
  --color-dead-grass-200: #dad7a4;
  --color-dead-grass-300: #bebb7c;
  --color-dead-grass-400: #a9a155;
  --color-dead-grass-500: #92892a;
  --color-dead-grass-600: #7c7426;
  --color-dead-grass-700: #635d1e;
  --color-dead-grass-800: #4a4313;
  --color-dead-grass-900: #332e0c;
  --color-dead-grass-950: #1f1b01;
}

SCSS

$dead-grass: #e4dc8a;
$dead-grass-rgb: 228, 220, 138;
$dead-grass-light: mix(#fff, $dead-grass, 20%);
$dead-grass-dark: mix(#000, $dead-grass, 20%);

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