Fluorescent Lime

CSS

:root {
  --fluorescent-lime: #bdc233;
  --fluorescent-lime-rgb: 189 194 51;
  --fluorescent-lime-oklch: oklch(0.785 0.157 111.6);
}

.element {
  color: var(--fluorescent-lime);
  background-color: hsl(62 58% 48%);
  border-color: oklch(0.785 0.157 111.6);
}

Tailwind CSS v4

@theme {
  --color-fluorescent-lime: #bdc233;
  --color-fluorescent-lime-50: #f4fbc7;
  --color-fluorescent-lime-100: #e7eeb2;
  --color-fluorescent-lime-200: #d4dc8d;
  --color-fluorescent-lime-300: #b7c05b;
  --color-fluorescent-lime-400: #a2a616;
  --color-fluorescent-lime-500: #8b8e00;
  --color-fluorescent-lime-600: #767800;
  --color-fluorescent-lime-700: #5e6000;
  --color-fluorescent-lime-800: #474600;
  --color-fluorescent-lime-900: #313000;
  --color-fluorescent-lime-950: #1d1c00;
}

SCSS

$fluorescent-lime: #bdc233;
$fluorescent-lime-rgb: 189, 194, 51;
$fluorescent-lime-light: mix(#fff, $fluorescent-lime, 20%);
$fluorescent-lime-dark: mix(#000, $fluorescent-lime, 20%);

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