Red Rider

CSS

:root {
  --red-rider: #b9271c;
  --red-rider-rgb: 185 39 28;
  --red-rider-oklch: oklch(0.513 0.184 29.4);
}

.element {
  color: var(--red-rider);
  background-color: hsl(4 74% 42%);
  border-color: oklch(0.513 0.184 29.4);
}

Tailwind CSS v4

@theme {
  --color-red-rider: #b9271c;
  --color-red-rider-50: #ffe3d5;
  --color-red-rider-100: #ffd2c2;
  --color-red-rider-200: #ffb6a4;
  --color-red-rider-300: #ff917c;
  --color-red-rider-400: #f86c5b;
  --color-red-rider-500: #e64434;
  --color-red-rider-600: #c33b2e;
  --color-red-rider-700: #9c2f24;
  --color-red-rider-800: #75201c;
  --color-red-rider-900: #531512;
  --color-red-rider-950: #370505;
}

SCSS

$red-rider: #b9271c;
$red-rider-rgb: 185, 39, 28;
$red-rider-light: mix(#fff, $red-rider, 20%);
$red-rider-dark: mix(#000, $red-rider, 20%);

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