Fluorescent Red

CSS

:root {
  --fluorescent-red: #ff5555;
  --fluorescent-red-rgb: 255 85 85;
  --fluorescent-red-oklch: oklch(0.682 0.206 24.4);
}

.element {
  color: var(--fluorescent-red);
  background-color: hsl(0 100% 67%);
  border-color: oklch(0.682 0.206 24.4);
}

Tailwind CSS v4

@theme {
  --color-fluorescent-red: #ff5555;
  --color-fluorescent-red-50: #ffdfd6;
  --color-fluorescent-red-100: #ffcec3;
  --color-fluorescent-red-200: #ffb1a5;
  --color-fluorescent-red-300: #ff897e;
  --color-fluorescent-red-400: #ff615e;
  --color-fluorescent-red-500: #f02d39;
  --color-fluorescent-red-600: #cb2a32;
  --color-fluorescent-red-700: #a32227;
  --color-fluorescent-red-800: #7a161e;
  --color-fluorescent-red-900: #560e14;
  --color-fluorescent-red-950: #3a0006;
}

SCSS

$fluorescent-red: #ff5555;
$fluorescent-red-rgb: 255, 85, 85;
$fluorescent-red-light: mix(#fff, $fluorescent-red, 20%);
$fluorescent-red-dark: mix(#000, $fluorescent-red, 20%);

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