Red

CSS

:root {
  --red: #ff0000;
  --red-rgb: 255 0 0;
  --red-oklch: oklch(0.628 0.258 29.2);
}

.element {
  color: var(--red);
  background-color: hsl(0 100% 50%);
  border-color: oklch(0.628 0.258 29.2);
}

Tailwind CSS v4

@theme {
  --color-red: #ff0000;
  --color-red-50: #ffdac8;
  --color-red-100: #ffc7b3;
  --color-red-200: #ffa78e;
  --color-red-300: #ff7a5f;
  --color-red-400: #ff4535;
  --color-red-500: #ff0000;
  --color-red-600: #dd0000;
  --color-red-700: #b20000;
  --color-red-800: #850000;
  --color-red-900: #5f0001;
  --color-red-950: #400000;
}

SCSS

$red: #ff0000;
$red-rgb: 255, 0, 0;
$red-light: mix(#fff, $red, 20%);
$red-dark: mix(#000, $red, 20%);

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