Lime Shot

CSS

:root {
  --lime-shot: #1df914;
  --lime-shot-rgb: 29 249 20;
  --lime-shot-oklch: oklch(0.853 0.285 142.4);
}

.element {
  color: var(--lime-shot);
  background-color: hsl(118 95% 53%);
  border-color: oklch(0.853 0.285 142.4);
}

Tailwind CSS v4

@theme {
  --color-lime-shot: #1df914;
  --color-lime-shot-50: #c2ffc2;
  --color-lime-shot-100: #abffab;
  --color-lime-shot-200: #7ef382;
  --color-lime-shot-300: #37da49;
  --color-lime-shot-400: #00c300;
  --color-lime-shot-500: #00ad00;
  --color-lime-shot-600: #009200;
  --color-lime-shot-700: #007500;
  --color-lime-shot-800: #005600;
  --color-lime-shot-900: #003c00;
  --color-lime-shot-950: #002500;
}

SCSS

$lime-shot: #1df914;
$lime-shot-rgb: 29, 249, 20;
$lime-shot-light: mix(#fff, $lime-shot, 20%);
$lime-shot-dark: mix(#000, $lime-shot, 20%);

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