Fluorescent Fire

CSS

:root {
  --fluorescent-fire: #984427;
  --fluorescent-fire-rgb: 152 68 39;
  --fluorescent-fire-oklch: oklch(0.491 0.121 39.1);
}

.element {
  color: var(--fluorescent-fire);
  background-color: hsl(15 59% 37%);
  border-color: oklch(0.491 0.121 39.1);
}

Tailwind CSS v4

@theme {
  --color-fluorescent-fire: #984427;
  --color-fluorescent-fire-50: #ffebdb;
  --color-fluorescent-fire-100: #ffdbc9;
  --color-fluorescent-fire-200: #ffc4ad;
  --color-fluorescent-fire-300: #eda387;
  --color-fluorescent-fire-400: #db8468;
  --color-fluorescent-fire-500: #c86746;
  --color-fluorescent-fire-600: #a9573c;
  --color-fluorescent-fire-700: #88462f;
  --color-fluorescent-fire-800: #653223;
  --color-fluorescent-fire-900: #472217;
  --color-fluorescent-fire-950: #2e1108;
}

SCSS

$fluorescent-fire: #984427;
$fluorescent-fire-rgb: 152, 68, 39;
$fluorescent-fire-light: mix(#fff, $fluorescent-fire, 20%);
$fluorescent-fire-dark: mix(#000, $fluorescent-fire, 20%);

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