Red Reign

CSS

:root {
  --red-reign: #800707;
  --red-reign-rgb: 128 7 7;
  --red-reign-oklch: oklch(0.381 0.151 28.5);
}

.element {
  color: var(--red-reign);
  background-color: hsl(0 90% 26%);
  border-color: oklch(0.381 0.151 28.5);
}

Tailwind CSS v4

@theme {
  --color-red-reign: #800707;
  --color-red-reign-50: #ffe6dc;
  --color-red-reign-100: #ffd6ca;
  --color-red-reign-200: #ffbcae;
  --color-red-reign-300: #fb9988;
  --color-red-reign-400: #ea786a;
  --color-red-reign-500: #d85649;
  --color-red-reign-600: #b64a3f;
  --color-red-reign-700: #923b32;
  --color-red-reign-800: #6d2925;
  --color-red-reign-900: #4d1c19;
  --color-red-reign-950: #330b09;
}

SCSS

$red-reign: #800707;
$red-reign-rgb: 128, 7, 7;
$red-reign-light: mix(#fff, $red-reign, 20%);
$red-reign-dark: mix(#000, $red-reign, 20%);

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