Racing Red

CSS

:root {
  --racing-red: #c21727;
  --racing-red-rgb: 194 23 39;
  --racing-red-oklch: oklch(0.521 0.2 24.5);
}

.element {
  color: var(--racing-red);
  background-color: hsl(354 79% 43%);
  border-color: oklch(0.521 0.2 24.5);
}

Tailwind CSS v4

@theme {
  --color-racing-red: #c21727;
  --color-racing-red-50: #ffe0d7;
  --color-racing-red-100: #ffcfc5;
  --color-racing-red-200: #ffb2a6;
  --color-racing-red-300: #ff8b7f;
  --color-racing-red-400: #ff6460;
  --color-racing-red-500: #ee343c;
  --color-racing-red-600: #c92f34;
  --color-racing-red-700: #a12629;
  --color-racing-red-800: #791920;
  --color-racing-red-900: #551015;
  --color-racing-red-950: #390207;
}

SCSS

$racing-red: #c21727;
$racing-red-rgb: 194, 23, 39;
$racing-red-light: mix(#fff, $racing-red, 20%);
$racing-red-dark: mix(#000, $racing-red, 20%);

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