Yellow Green

CSS

:root {
  --yellow-green: #c8fd3d;
  --yellow-green-rgb: 200 253 61;
  --yellow-green-oklch: oklch(0.925 0.213 124.4);
}

.element {
  color: var(--yellow-green);
  background-color: hsl(77 98% 62%);
  border-color: oklch(0.925 0.213 124.4);
}

Tailwind CSS v4

@theme {
  --color-yellow-green: #c8fd3d;
  --color-yellow-green-50: #e5ffbf;
  --color-yellow-green-100: #d6f5a7;
  --color-yellow-green-200: #bde57d;
  --color-yellow-green-300: #9bca42;
  --color-yellow-green-400: #84b100;
  --color-yellow-green-500: #699a00;
  --color-yellow-green-600: #598200;
  --color-yellow-green-700: #476800;
  --color-yellow-green-800: #364c00;
  --color-yellow-green-900: #253500;
  --color-yellow-green-950: #142000;
}

SCSS

$yellow-green: #c8fd3d;
$yellow-green-rgb: 200, 253, 61;
$yellow-green-light: mix(#fff, $yellow-green, 20%);
$yellow-green-dark: mix(#000, $yellow-green, 20%);

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