Odd Pea Pod

CSS

:root {
  --odd-pea-pod: #357911;
  --odd-pea-pod-rgb: 53 121 17;
  --odd-pea-pod-oklch: oklch(0.512 0.149 137.8);
}

.element {
  color: var(--odd-pea-pod);
  background-color: hsl(99 75% 27%);
  border-color: oklch(0.512 0.149 137.8);
}

Tailwind CSS v4

@theme {
  --color-odd-pea-pod: #357911;
  --color-odd-pea-pod-50: #e0ffd8;
  --color-odd-pea-pod-100: #cef5c6;
  --color-odd-pea-pod-200: #b3e4a8;
  --color-odd-pea-pod-300: #8eca80;
  --color-odd-pea-pod-400: #71b358;
  --color-odd-pea-pod-500: #4f9c2d;
  --color-odd-pea-pod-600: #448428;
  --color-odd-pea-pod-700: #366a20;
  --color-odd-pea-pod-800: #294d12;
  --color-odd-pea-pod-900: #1b360b;
  --color-odd-pea-pod-950: #0b2101;
}

SCSS

$odd-pea-pod: #357911;
$odd-pea-pod-rgb: 53, 121, 17;
$odd-pea-pod-light: mix(#fff, $odd-pea-pod, 20%);
$odd-pea-pod-dark: mix(#000, $odd-pea-pod, 20%);

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