Crisis Red

CSS

:root {
  --crisis-red: #bb2222;
  --crisis-red-rgb: 187 34 34;
  --crisis-red-oklch: oklch(0.514 0.188 27);
}

.element {
  color: var(--crisis-red);
  background-color: hsl(0 69% 43%);
  border-color: oklch(0.514 0.188 27);
}

Tailwind CSS v4

@theme {
  --color-crisis-red: #bb2222;
  --color-crisis-red-50: #ffe2d6;
  --color-crisis-red-100: #ffd1c4;
  --color-crisis-red-200: #ffb5a6;
  --color-crisis-red-300: #ff8f7e;
  --color-crisis-red-400: #fa6a5f;
  --color-crisis-red-500: #e83f3a;
  --color-crisis-red-600: #c43732;
  --color-crisis-red-700: #9e2c28;
  --color-crisis-red-800: #761e1e;
  --color-crisis-red-900: #531414;
  --color-crisis-red-950: #370406;
}

SCSS

$crisis-red: #bb2222;
$crisis-red-rgb: 187, 34, 34;
$crisis-red-light: mix(#fff, $crisis-red, 20%);
$crisis-red-dark: mix(#000, $crisis-red, 20%);

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