Rage of Quel’Danas

CSS

:root {
  --rage-of-quel-danas: #f32507;
  --rage-of-quel-danas-rgb: 243 37 7;
  --rage-of-quel-danas-oklch: oklch(0.617 0.238 30.9);
}

.element {
  color: var(--rage-of-quel-danas);
  background-color: hsl(8 94% 49%);
  border-color: oklch(0.617 0.238 30.9);
}

Tailwind CSS v4

@theme {
  --color-rage-of-quel-danas: #f32507;
  --color-rage-of-quel-danas-50: #ffddca;
  --color-rage-of-quel-danas-100: #ffcbb5;
  --color-rage-of-quel-danas-200: #ffac91;
  --color-rage-of-quel-danas-300: #ff8163;
  --color-rage-of-quel-danas-400: #ff533a;
  --color-rage-of-quel-danas-500: #fd0000;
  --color-rage-of-quel-danas-600: #d60300;
  --color-rage-of-quel-danas-700: #ac0800;
  --color-rage-of-quel-danas-800: #810202;
  --color-rage-of-quel-danas-900: #5b0403;
  --color-rage-of-quel-danas-950: #3e0000;
}

SCSS

$rage-of-quel-danas: #f32507;
$rage-of-quel-danas-rgb: 243, 37, 7;
$rage-of-quel-danas-light: mix(#fff, $rage-of-quel-danas, 20%);
$rage-of-quel-danas-dark: mix(#000, $rage-of-quel-danas, 20%);

.element {
  color: $rage-of-quel-danas;
  box-shadow: 0 0 0 2px rgba($rage-of-quel-danas, 0.35);
}