True Green

CSS

:root {
  --true-green: #089404;
  --true-green-rgb: 8 148 4;
  --true-green-oklch: oklch(0.578 0.195 142.4);
}

.element {
  color: var(--true-green);
  background-color: hsl(118 95% 30%);
  border-color: oklch(0.578 0.195 142.4);
}

Tailwind CSS v4

@theme {
  --color-true-green: #089404;
  --color-true-green-50: #d4ffd3;
  --color-true-green-100: #c0fabf;
  --color-true-green-200: #9fea9f;
  --color-true-green-300: #73d175;
  --color-true-green-400: #4cba46;
  --color-true-green-500: #00a300;
  --color-true-green-600: #078a04;
  --color-true-green-700: #096f06;
  --color-true-green-800: #0f5100;
  --color-true-green-900: #093900;
  --color-true-green-950: #002300;
}

SCSS

$true-green: #089404;
$true-green-rgb: 8, 148, 4;
$true-green-light: mix(#fff, $true-green, 20%);
$true-green-dark: mix(#000, $true-green, 20%);

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