Fluorescent Pink

CSS

:root {
  --fluorescent-pink: #fe1493;
  --fluorescent-pink-rgb: 254 20 147;
  --fluorescent-pink-oklch: oklch(0.653 0.261 356.8);
}

.element {
  color: var(--fluorescent-pink);
  background-color: hsl(327 99% 54%);
  border-color: oklch(0.653 0.261 356.8);
}

Tailwind CSS v4

@theme {
  --color-fluorescent-pink: #fe1493;
  --color-fluorescent-pink-50: #ffd6f4;
  --color-fluorescent-pink-100: #ffc3e6;
  --color-fluorescent-pink-200: #ffa1d2;
  --color-fluorescent-pink-300: #ff73b5;
  --color-fluorescent-pink-400: #ff3fa1;
  --color-fluorescent-pink-500: #fa0089;
  --color-fluorescent-pink-600: #d30074;
  --color-fluorescent-pink-700: #aa005d;
  --color-fluorescent-pink-800: #7f0047;
  --color-fluorescent-pink-900: #5a0031;
  --color-fluorescent-pink-950: #3c001d;
}

SCSS

$fluorescent-pink: #fe1493;
$fluorescent-pink-rgb: 254, 20, 147;
$fluorescent-pink-light: mix(#fff, $fluorescent-pink, 20%);
$fluorescent-pink-dark: mix(#000, $fluorescent-pink, 20%);

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