Young Green Onion

CSS

:root {
  --young-green-onion: #aacf53;
  --young-green-onion-rgb: 170 207 83;
  --young-green-onion-oklch: oklch(0.803 0.156 123.9);
}

.element {
  color: var(--young-green-onion);
  background-color: hsl(78 56% 57%);
  border-color: oklch(0.803 0.156 123.9);
}

Tailwind CSS v4

@theme {
  --color-young-green-onion: #aacf53;
  --color-young-green-onion-50: #eafece;
  --color-young-green-onion-100: #dbf2b9;
  --color-young-green-onion-200: #c4e197;
  --color-young-green-onion-300: #a4c66a;
  --color-young-green-onion-400: #8cad37;
  --color-young-green-onion-500: #719600;
  --color-young-green-onion-600: #607f00;
  --color-young-green-onion-700: #4d6500;
  --color-young-green-onion-800: #3a4a00;
  --color-young-green-onion-900: #283300;
  --color-young-green-onion-950: #161f00;
}

SCSS

$young-green-onion: #aacf53;
$young-green-onion-rgb: 170, 207, 83;
$young-green-onion-light: mix(#fff, $young-green-onion, 20%);
$young-green-onion-dark: mix(#000, $young-green-onion, 20%);

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