Yellow Green Shade

CSS

:root {
  --yellow-green-shade: #c5e384;
  --yellow-green-shade-rgb: 197 227 132;
  --yellow-green-shade-oklch: oklch(0.873 0.125 123.3);
}

.element {
  color: var(--yellow-green-shade);
  background-color: hsl(79 63% 70%);
  border-color: oklch(0.873 0.125 123.3);
}

Tailwind CSS v4

@theme {
  --color-yellow-green-shade: #c5e384;
  --color-yellow-green-shade-50: #edfcd5;
  --color-yellow-green-shade-100: #def0c3;
  --color-yellow-green-shade-200: #c7dea4;
  --color-yellow-green-shade-300: #a8c37b;
  --color-yellow-green-shade-400: #90ab52;
  --color-yellow-green-shade-500: #769324;
  --color-yellow-green-shade-600: #647c21;
  --color-yellow-green-shade-700: #50641a;
  --color-yellow-green-shade-800: #3c490e;
  --color-yellow-green-shade-900: #293209;
  --color-yellow-green-shade-950: #171e00;
}

SCSS

$yellow-green-shade: #c5e384;
$yellow-green-shade-rgb: 197, 227, 132;
$yellow-green-shade-light: mix(#fff, $yellow-green-shade, 20%);
$yellow-green-shade-dark: mix(#000, $yellow-green-shade, 20%);

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