Red Revival

CSS

:root {
  --red-revival: #a8453b;
  --red-revival-rgb: 168 69 59;
  --red-revival-oklch: oklch(0.521 0.133 28.3);
}

.element {
  color: var(--red-revival);
  background-color: hsl(6 48% 45%);
  border-color: oklch(0.521 0.133 28.3);
}

Tailwind CSS v4

@theme {
  --color-red-revival: #a8453b;
  --color-red-revival-50: #ffe8df;
  --color-red-revival-100: #ffd8ce;
  --color-red-revival-200: #ffc0b3;
  --color-red-revival-300: #f49d8f;
  --color-red-revival-400: #e27e71;
  --color-red-revival-500: #cf5e52;
  --color-red-revival-600: #af5046;
  --color-red-revival-700: #8d4038;
  --color-red-revival-800: #692d29;
  --color-red-revival-900: #4a1f1b;
  --color-red-revival-950: #300e0c;
}

SCSS

$red-revival: #a8453b;
$red-revival-rgb: 168, 69, 59;
$red-revival-light: mix(#fff, $red-revival, 20%);
$red-revival-dark: mix(#000, $red-revival, 20%);

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