Red Inferno

CSS

:root {
  --red-inferno: #bb1e1e;
  --red-inferno-rgb: 187 30 30;
  --red-inferno-oklch: oklch(0.511 0.191 27.4);
}

.element {
  color: var(--red-inferno);
  background-color: hsl(0 72% 43%);
  border-color: oklch(0.511 0.191 27.4);
}

Tailwind CSS v4

@theme {
  --color-red-inferno: #bb1e1e;
  --color-red-inferno-50: #ffe1d6;
  --color-red-inferno-100: #ffd0c3;
  --color-red-inferno-200: #ffb4a4;
  --color-red-inferno-300: #ff8e7d;
  --color-red-inferno-400: #fb695d;
  --color-red-inferno-500: #ea3d37;
  --color-red-inferno-600: #c53630;
  --color-red-inferno-700: #9f2b26;
  --color-red-inferno-800: #771d1d;
  --color-red-inferno-900: #541313;
  --color-red-inferno-950: #380405;
}

SCSS

$red-inferno: #bb1e1e;
$red-inferno-rgb: 187, 30, 30;
$red-inferno-light: mix(#fff, $red-inferno, 20%);
$red-inferno-dark: mix(#000, $red-inferno, 20%);

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