Hot Pepper Green

CSS

:root {
  --hot-pepper-green: #598039;
  --hot-pepper-green-rgb: 89 128 57;
  --hot-pepper-green-oklch: oklch(0.554 0.109 132.8);
}

.element {
  color: var(--hot-pepper-green);
  background-color: hsl(93 38% 36%);
  border-color: oklch(0.554 0.109 132.8);
}

Tailwind CSS v4

@theme {
  --color-hot-pepper-green: #598039;
  --color-hot-pepper-green-50: #e8fddd;
  --color-hot-pepper-green-100: #d9f1cc;
  --color-hot-pepper-green-200: #c1dfb0;
  --color-hot-pepper-green-300: #a0c48b;
  --color-hot-pepper-green-400: #85ac68;
  --color-hot-pepper-green-500: #699545;
  --color-hot-pepper-green-600: #597e3c;
  --color-hot-pepper-green-700: #47652f;
  --color-hot-pepper-green-800: #354a1f;
  --color-hot-pepper-green-900: #243315;
  --color-hot-pepper-green-950: #131f06;
}

SCSS

$hot-pepper-green: #598039;
$hot-pepper-green-rgb: 89, 128, 57;
$hot-pepper-green-light: mix(#fff, $hot-pepper-green, 20%);
$hot-pepper-green-dark: mix(#000, $hot-pepper-green, 20%);

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