Fluorescence

CSS

:root {
  --fluorescence: #89d178;
  --fluorescence-rgb: 137 209 120;
  --fluorescence-oklch: oklch(0.792 0.141 139.7);
}

.element {
  color: var(--fluorescence);
  background-color: hsl(109 49% 65%);
  border-color: oklch(0.792 0.141 139.7);
}

Tailwind CSS v4

@theme {
  --color-fluorescence: #89d178;
  --color-fluorescence-50: #dfffdb;
  --color-fluorescence-100: #cef4c9;
  --color-fluorescence-200: #b3e4ac;
  --color-fluorescence-300: #8eca86;
  --color-fluorescence-400: #70b260;
  --color-fluorescence-500: #4d9c39;
  --color-fluorescence-600: #428432;
  --color-fluorescence-700: #356928;
  --color-fluorescence-800: #284d18;
  --color-fluorescence-900: #1b3610;
  --color-fluorescence-950: #0b2103;
}

SCSS

$fluorescence: #89d178;
$fluorescence-rgb: 137, 209, 120;
$fluorescence-light: mix(#fff, $fluorescence, 20%);
$fluorescence-dark: mix(#000, $fluorescence, 20%);

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