Sombre Green

CSS

:root {
  --sombre-green: #005c2b;
  --sombre-green-rgb: 0 92 43;
  --sombre-green-oklch: oklch(0.416 0.11 151.6);
}

.element {
  color: var(--sombre-green);
  background-color: hsl(148 100% 18%);
  border-color: oklch(0.416 0.11 151.6);
}

Tailwind CSS v4

@theme {
  --color-sombre-green: #005c2b;
  --color-sombre-green-50: #deffe7;
  --color-sombre-green-100: #cdf3d7;
  --color-sombre-green-200: #b0e3bf;
  --color-sombre-green-300: #8bc89d;
  --color-sombre-green-400: #6ab17d;
  --color-sombre-green-500: #459b60;
  --color-sombre-green-600: #3c8352;
  --color-sombre-green-700: #306941;
  --color-sombre-green-800: #234d2d;
  --color-sombre-green-900: #17351e;
  --color-sombre-green-950: #08200e;
}

SCSS

$sombre-green: #005c2b;
$sombre-green-rgb: 0, 92, 43;
$sombre-green-light: mix(#fff, $sombre-green, 20%);
$sombre-green-dark: mix(#000, $sombre-green, 20%);

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