Red Gore

CSS

:root {
  --red-gore: #ad1400;
  --red-gore-rgb: 173 20 0;
  --red-gore-oklch: oklch(0.477 0.186 30.9);
}

.element {
  color: var(--red-gore);
  background-color: hsl(7 100% 34%);
  border-color: oklch(0.477 0.186 30.9);
}

Tailwind CSS v4

@theme {
  --color-red-gore: #ad1400;
  --color-red-gore-50: #ffe3d3;
  --color-red-gore-100: #ffd2c0;
  --color-red-gore-200: #ffb6a1;
  --color-red-gore-300: #ff9178;
  --color-red-gore-400: #f96c56;
  --color-red-gore-500: #e7432d;
  --color-red-gore-600: #c33a28;
  --color-red-gore-700: #9d2f20;
  --color-red-gore-800: #762018;
  --color-red-gore-900: #531510;
  --color-red-gore-950: #370503;
}

SCSS

$red-gore: #ad1400;
$red-gore-rgb: 173, 20, 0;
$red-gore-light: mix(#fff, $red-gore, 20%);
$red-gore-dark: mix(#000, $red-gore, 20%);

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