Allura Red

CSS

:root {
  --allura-red: #ed2e38;
  --allura-red-rgb: 237 46 56;
  --allura-red-oklch: oklch(0.614 0.224 24.8);
}

.element {
  color: var(--allura-red);
  background-color: hsl(357 84% 55%);
  border-color: oklch(0.614 0.224 24.8);
}

Tailwind CSS v4

@theme {
  --color-allura-red: #ed2e38;
  --color-allura-red-50: #ffddd3;
  --color-allura-red-100: #ffcbc0;
  --color-allura-red-200: #ffada0;
  --color-allura-red-300: #ff8477;
  --color-allura-red-400: #ff5857;
  --color-allura-red-500: #f8112f;
  --color-allura-red-600: #d11829;
  --color-allura-red-700: #a81521;
  --color-allura-red-800: #7e0b1a;
  --color-allura-red-900: #590811;
  --color-allura-red-950: #3c0004;
}

SCSS

$allura-red: #ed2e38;
$allura-red-rgb: 237, 46, 56;
$allura-red-light: mix(#fff, $allura-red, 20%);
$allura-red-dark: mix(#000, $allura-red, 20%);

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