Lime Yellow

CSS

:root {
  --lime-yellow: #d0fe1d;
  --lime-yellow-rgb: 208 254 29;
  --lime-yellow-oklch: oklch(0.932 0.222 122.2);
}

.element {
  color: var(--lime-yellow);
  background-color: hsl(72 99% 55%);
  border-color: oklch(0.932 0.222 122.2);
}

Tailwind CSS v4

@theme {
  --color-lime-yellow: #d0fe1d;
  --color-lime-yellow-50: #e7ffba;
  --color-lime-yellow-100: #d8f5a2;
  --color-lime-yellow-200: #c0e475;
  --color-lime-yellow-300: #a0c931;
  --color-lime-yellow-400: #89b000;
  --color-lime-yellow-500: #709800;
  --color-lime-yellow-600: #5e8100;
  --color-lime-yellow-700: #4b6700;
  --color-lime-yellow-800: #3a4b00;
  --color-lime-yellow-900: #283400;
  --color-lime-yellow-950: #161f00;
}

SCSS

$lime-yellow: #d0fe1d;
$lime-yellow-rgb: 208, 254, 29;
$lime-yellow-light: mix(#fff, $lime-yellow, 20%);
$lime-yellow-dark: mix(#000, $lime-yellow, 20%);

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