Lime Fizz

CSS

:root {
  --lime-fizz: #cfe838;
  --lime-fizz-rgb: 207 232 56;
  --lime-fizz-oklch: oklch(0.883 0.189 117.7);
}

.element {
  color: var(--lime-fizz);
  background-color: hsl(69 79% 56%);
  border-color: oklch(0.883 0.189 117.7);
}

Tailwind CSS v4

@theme {
  --color-lime-fizz: #cfe838;
  --color-lime-fizz-50: #eefec1;
  --color-lime-fizz-100: #e0f2aa;
  --color-lime-fizz-200: #cae081;
  --color-lime-fizz-300: #acc549;
  --color-lime-fizz-400: #96ab00;
  --color-lime-fizz-500: #7e9300;
  --color-lime-fizz-600: #6b7d00;
  --color-lime-fizz-700: #556400;
  --color-lime-fizz-800: #414800;
  --color-lime-fizz-900: #2d3200;
  --color-lime-fizz-950: #1a1e00;
}

SCSS

$lime-fizz: #cfe838;
$lime-fizz-rgb: 207, 232, 56;
$lime-fizz-light: mix(#fff, $lime-fizz, 20%);
$lime-fizz-dark: mix(#000, $lime-fizz, 20%);

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