Bristle Grass

CSS

:root {
  --bristle-grass: #a28450;
  --bristle-grass-rgb: 162 132 80;
  --bristle-grass-oklch: oklch(0.63 0.079 80.3);
}

.element {
  color: var(--bristle-grass);
  background-color: hsl(38 34% 47%);
  border-color: oklch(0.63 0.079 80.3);
}

Tailwind CSS v4

@theme {
  --color-bristle-grass: #a28450;
  --color-bristle-grass-50: #fff4dc;
  --color-bristle-grass-100: #f5e6cb;
  --color-bristle-grass-200: #e5d2af;
  --color-bristle-grass-300: #ccb48a;
  --color-bristle-grass-400: #b79a68;
  --color-bristle-grass-500: #a18046;
  --color-bristle-grass-600: #886d3c;
  --color-bristle-grass-700: #6d5730;
  --color-bristle-grass-800: #513f21;
  --color-bristle-grass-900: #392b16;
  --color-bristle-grass-950: #231907;
}

SCSS

$bristle-grass: #a28450;
$bristle-grass-rgb: 162, 132, 80;
$bristle-grass-light: mix(#fff, $bristle-grass, 20%);
$bristle-grass-dark: mix(#000, $bristle-grass, 20%);

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