Burst of Lime

CSS

:root {
  --burst-of-lime: #acd243;
  --burst-of-lime-rgb: 172 210 67;
  --burst-of-lime-oklch: oklch(0.81 0.171 123.2);
}

.element {
  color: var(--burst-of-lime);
  background-color: hsl(76 61% 54%);
  border-color: oklch(0.81 0.171 123.2);
}

Tailwind CSS v4

@theme {
  --color-burst-of-lime: #acd243;
  --color-burst-of-lime-50: #eaffc9;
  --color-burst-of-lime-100: #daf3b4;
  --color-burst-of-lime-200: #c3e18f;
  --color-burst-of-lime-300: #a3c75f;
  --color-burst-of-lime-400: #8bae1f;
  --color-burst-of-lime-500: #719600;
  --color-burst-of-lime-600: #607f00;
  --color-burst-of-lime-700: #4d6600;
  --color-burst-of-lime-800: #3a4a00;
  --color-burst-of-lime-900: #283300;
  --color-burst-of-lime-950: #161f00;
}

SCSS

$burst-of-lime: #acd243;
$burst-of-lime-rgb: 172, 210, 67;
$burst-of-lime-light: mix(#fff, $burst-of-lime, 20%);
$burst-of-lime-dark: mix(#000, $burst-of-lime, 20%);

.element {
  color: $burst-of-lime;
  box-shadow: 0 0 0 2px rgba($burst-of-lime, 0.35);
}