Bonza Green

CSS

:root {
  --bonza-green: #5e6b44;
  --bonza-green-rgb: 94 107 68;
  --bonza-green-oklch: oklch(0.506 0.06 123.5);
}

.element {
  color: var(--bonza-green);
  background-color: hsl(80 22% 34%);
  border-color: oklch(0.506 0.06 123.5);
}

Tailwind CSS v4

@theme {
  --color-bonza-green: #5e6b44;
  --color-bonza-green-50: #f1f9e6;
  --color-bonza-green-100: #e3ecd6;
  --color-bonza-green-200: #ced9be;
  --color-bonza-green-300: #b0bd9c;
  --color-bonza-green-400: #97a57e;
  --color-bonza-green-500: #7e8d60;
  --color-bonza-green-600: #6b7752;
  --color-bonza-green-700: #556041;
  --color-bonza-green-800: #3f462e;
  --color-bonza-green-900: #2b301f;
  --color-bonza-green-950: #191d0f;
}

SCSS

$bonza-green: #5e6b44;
$bonza-green-rgb: 94, 107, 68;
$bonza-green-light: mix(#fff, $bonza-green, 20%);
$bonza-green-dark: mix(#000, $bonza-green, 20%);

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