Green Onion

CSS

:root {
  --green-onion: #c1e089;
  --green-onion-rgb: 193 224 137;
  --green-onion-oklch: oklch(0.864 0.117 124.8);
}

.element {
  color: var(--green-onion);
  background-color: hsl(81 58% 71%);
  border-color: oklch(0.864 0.117 124.8);
}

Tailwind CSS v4

@theme {
  --color-green-onion: #c1e089;
  --color-green-onion-50: #ecfcd8;
  --color-green-onion-100: #ddf0c6;
  --color-green-onion-200: #c7dea8;
  --color-green-onion-300: #a7c381;
  --color-green-onion-400: #8faa5a;
  --color-green-onion-500: #759331;
  --color-green-onion-600: #637c2c;
  --color-green-onion-700: #4f6423;
  --color-green-onion-800: #3b4915;
  --color-green-onion-900: #28320e;
  --color-green-onion-950: #161e02;
}

SCSS

$green-onion: #c1e089;
$green-onion-rgb: 193, 224, 137;
$green-onion-light: mix(#fff, $green-onion, 20%);
$green-onion-dark: mix(#000, $green-onion, 20%);

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