Emerald Clear Green

CSS

:root {
  --emerald-clear-green: #4f8129;
  --emerald-clear-green-rgb: 79 129 41;
  --emerald-clear-green-oklch: oklch(0.549 0.131 134.2);
}

.element {
  color: var(--emerald-clear-green);
  background-color: hsl(94 52% 33%);
  border-color: oklch(0.549 0.131 134.2);
}

Tailwind CSS v4

@theme {
  --color-emerald-clear-green: #4f8129;
  --color-emerald-clear-green-50: #e5feda;
  --color-emerald-clear-green-100: #d5f3c7;
  --color-emerald-clear-green-200: #bbe2aa;
  --color-emerald-clear-green-300: #99c784;
  --color-emerald-clear-green-400: #7daf5d;
  --color-emerald-clear-green-500: #609836;
  --color-emerald-clear-green-600: #51812f;
  --color-emerald-clear-green-700: #416725;
  --color-emerald-clear-green-800: #314b17;
  --color-emerald-clear-green-900: #21340f;
  --color-emerald-clear-green-950: #102002;
}

SCSS

$emerald-clear-green: #4f8129;
$emerald-clear-green-rgb: 79, 129, 41;
$emerald-clear-green-light: mix(#fff, $emerald-clear-green, 20%);
$emerald-clear-green-dark: mix(#000, $emerald-clear-green, 20%);

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