Scarlet Blaze

CSS

:root {
  --scarlet-blaze: #b21f1f;
  --scarlet-blaze-rgb: 178 31 31;
  --scarlet-blaze-oklch: oklch(0.494 0.182 27.1);
}

.element {
  color: var(--scarlet-blaze);
  background-color: hsl(0 70% 41%);
  border-color: oklch(0.494 0.182 27.1);
}

Tailwind CSS v4

@theme {
  --color-scarlet-blaze: #b21f1f;
  --color-scarlet-blaze-50: #ffe2d7;
  --color-scarlet-blaze-100: #ffd2c5;
  --color-scarlet-blaze-200: #ffb6a7;
  --color-scarlet-blaze-300: #ff9180;
  --color-scarlet-blaze-400: #f76c61;
  --color-scarlet-blaze-500: #e6433d;
  --color-scarlet-blaze-600: #c23b35;
  --color-scarlet-blaze-700: #9c2f2a;
  --color-scarlet-blaze-800: #75201f;
  --color-scarlet-blaze-900: #521515;
  --color-scarlet-blaze-950: #370506;
}

SCSS

$scarlet-blaze: #b21f1f;
$scarlet-blaze-rgb: 178, 31, 31;
$scarlet-blaze-light: mix(#fff, $scarlet-blaze, 20%);
$scarlet-blaze-dark: mix(#000, $scarlet-blaze, 20%);

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