Prairie Grass

CSS

:root {
  --prairie-grass: #b1a38e;
  --prairie-grass-rgb: 177 163 142;
  --prairie-grass-oklch: oklch(0.722 0.034 78.1);
}

.element {
  color: var(--prairie-grass);
  background-color: hsl(36 18% 63%);
  border-color: oklch(0.722 0.034 78.1);
}

Tailwind CSS v4

@theme {
  --color-prairie-grass: #b1a38e;
  --color-prairie-grass-50: #faf4eb;
  --color-prairie-grass-100: #eee7dc;
  --color-prairie-grass-200: #dcd3c5;
  --color-prairie-grass-300: #c1b6a5;
  --color-prairie-grass-400: #aa9c89;
  --color-prairie-grass-500: #93846d;
  --color-prairie-grass-600: #7c705d;
  --color-prairie-grass-700: #63594a;
  --color-prairie-grass-800: #494136;
  --color-prairie-grass-900: #332d24;
  --color-prairie-grass-950: #1e1a13;
}

SCSS

$prairie-grass: #b1a38e;
$prairie-grass-rgb: 177, 163, 142;
$prairie-grass-light: mix(#fff, $prairie-grass, 20%);
$prairie-grass-dark: mix(#000, $prairie-grass, 20%);

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