Little Red Corvette

CSS

:root {
  --little-red-corvette: #e50102;
  --little-red-corvette-rgb: 229 1 2;
  --little-red-corvette-oklch: oklch(0.579 0.237 29.1);
}

.element {
  color: var(--little-red-corvette);
  background-color: hsl(360 99% 45%);
  border-color: oklch(0.579 0.237 29.1);
}

Tailwind CSS v4

@theme {
  --color-little-red-corvette: #e50102;
  --color-little-red-corvette-50: #ffdccc;
  --color-little-red-corvette-100: #ffcab7;
  --color-little-red-corvette-200: #ffab95;
  --color-little-red-corvette-300: #ff8168;
  --color-little-red-corvette-400: #ff5242;
  --color-little-red-corvette-500: #fd0000;
  --color-little-red-corvette-600: #d60102;
  --color-little-red-corvette-700: #ac0604;
  --color-little-red-corvette-800: #810109;
  --color-little-red-corvette-900: #5b0306;
  --color-little-red-corvette-950: #3e0000;
}

SCSS

$little-red-corvette: #e50102;
$little-red-corvette-rgb: 229, 1, 2;
$little-red-corvette-light: mix(#fff, $little-red-corvette, 20%);
$little-red-corvette-dark: mix(#000, $little-red-corvette, 20%);

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