Fabulous Red

CSS

:root {
  --fabulous-red: #a92c29;
  --fabulous-red-rgb: 169 44 41;
  --fabulous-red-oklch: oklch(0.49 0.162 26.6);
}

.element {
  color: var(--fabulous-red);
  background-color: hsl(1 61% 41%);
  border-color: oklch(0.49 0.162 26.6);
}

Tailwind CSS v4

@theme {
  --color-fabulous-red: #a92c29;
  --color-fabulous-red-50: #ffe5db;
  --color-fabulous-red-100: #ffd4c9;
  --color-fabulous-red-200: #ffbaad;
  --color-fabulous-red-300: #ff9687;
  --color-fabulous-red-400: #ef7469;
  --color-fabulous-red-500: #dd4f48;
  --color-fabulous-red-600: #bb443e;
  --color-fabulous-red-700: #963731;
  --color-fabulous-red-800: #702625;
  --color-fabulous-red-900: #4f1a18;
  --color-fabulous-red-950: #340909;
}

SCSS

$fabulous-red: #a92c29;
$fabulous-red-rgb: 169, 44, 41;
$fabulous-red-light: mix(#fff, $fabulous-red, 20%);
$fabulous-red-dark: mix(#000, $fabulous-red, 20%);

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