Fluorescent Yellow

CSS

:root {
  --fluorescent-yellow: #ccff02;
  --fluorescent-yellow-rgb: 204 255 2;
  --fluorescent-yellow-oklch: oklch(0.931 0.228 123.1);
}

.element {
  color: var(--fluorescent-yellow);
  background-color: hsl(72 100% 50%);
  border-color: oklch(0.931 0.228 123.1);
}

Tailwind CSS v4

@theme {
  --color-fluorescent-yellow: #ccff02;
  --color-fluorescent-yellow-50: #e6ffb9;
  --color-fluorescent-yellow-100: #d6f6a1;
  --color-fluorescent-yellow-200: #bee573;
  --color-fluorescent-yellow-300: #9dca2b;
  --color-fluorescent-yellow-400: #86b100;
  --color-fluorescent-yellow-500: #6c9900;
  --color-fluorescent-yellow-600: #5b8200;
  --color-fluorescent-yellow-700: #496800;
  --color-fluorescent-yellow-800: #384c00;
  --color-fluorescent-yellow-900: #263500;
  --color-fluorescent-yellow-950: #152000;
}

SCSS

$fluorescent-yellow: #ccff02;
$fluorescent-yellow-rgb: 204, 255, 2;
$fluorescent-yellow-light: mix(#fff, $fluorescent-yellow, 20%);
$fluorescent-yellow-dark: mix(#000, $fluorescent-yellow, 20%);

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