Fluorescent Red Orange

CSS

:root {
  --fluorescent-red-orange: #fc8427;
  --fluorescent-red-orange-rgb: 252 132 39;
  --fluorescent-red-orange-oklch: oklch(0.735 0.175 52.3);
}

.element {
  color: var(--fluorescent-red-orange);
  background-color: hsl(26 97% 57%);
  border-color: oklch(0.735 0.175 52.3);
}

Tailwind CSS v4

@theme {
  --color-fluorescent-red-orange: #fc8427;
  --color-fluorescent-red-orange-50: #ffe9c6;
  --color-fluorescent-red-orange-100: #ffd9b1;
  --color-fluorescent-red-orange-200: #ffc08b;
  --color-fluorescent-red-orange-300: #fc9d5a;
  --color-fluorescent-red-orange-400: #ec7b24;
  --color-fluorescent-red-orange-500: #da5900;
  --color-fluorescent-red-orange-600: #b84c00;
  --color-fluorescent-red-orange-700: #943d00;
  --color-fluorescent-red-orange-800: #6f2a00;
  --color-fluorescent-red-orange-900: #4e1d00;
  --color-fluorescent-red-orange-950: #340c00;
}

SCSS

$fluorescent-red-orange: #fc8427;
$fluorescent-red-orange-rgb: 252, 132, 39;
$fluorescent-red-orange-light: mix(#fff, $fluorescent-red-orange, 20%);
$fluorescent-red-orange-dark: mix(#000, $fluorescent-red-orange, 20%);

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