Red Alert

CSS

:root {
  --red-alert: #ff0f0f;
  --red-alert-rgb: 255 15 15;
  --red-alert-oklch: oklch(0.631 0.255 28.9);
}

.element {
  color: var(--red-alert);
  background-color: hsl(0 100% 53%);
  border-color: oklch(0.631 0.255 28.9);
}

Tailwind CSS v4

@theme {
  --color-red-alert: #ff0f0f;
  --color-red-alert-50: #ffdac9;
  --color-red-alert-100: #ffc7b4;
  --color-red-alert-200: #ffa790;
  --color-red-alert-300: #ff7b61;
  --color-red-alert-400: #ff4739;
  --color-red-alert-500: #ff0000;
  --color-red-alert-600: #dc0000;
  --color-red-alert-700: #b10000;
  --color-red-alert-800: #850002;
  --color-red-alert-900: #5e0002;
  --color-red-alert-950: #400000;
}

SCSS

$red-alert: #ff0f0f;
$red-alert-rgb: 255, 15, 15;
$red-alert-light: mix(#fff, $red-alert, 20%);
$red-alert-dark: mix(#000, $red-alert, 20%);

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