Ao

CSS

:root {
  --ao: #00800c;
  --ao-rgb: 0 128 12;
  --ao-oklch: oklch(0.52 0.173 143.1);
}

.element {
  color: var(--ao);
  background-color: hsl(126 100% 25%);
  border-color: oklch(0.52 0.173 143.1);
}

Tailwind CSS v4

@theme {
  --color-ao: #00800c;
  --color-ao-50: #d7ffd7;
  --color-ao-100: #c4f8c5;
  --color-ao-200: #a5e8a6;
  --color-ao-300: #7bcf7f;
  --color-ao-400: #57b855;
  --color-ao-500: #23a127;
  --color-ao-600: #228823;
  --color-ao-700: #1b6d1c;
  --color-ao-800: #17500e;
  --color-ao-900: #0f3809;
  --color-ao-950: #022200;
}

SCSS

$ao: #00800c;
$ao-rgb: 0, 128, 12;
$ao-light: mix(#fff, $ao, 20%);
$ao-dark: mix(#000, $ao, 20%);

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