#D41F23

CSS

:root {
  --cartoon-violence: #d41f23;
  --cartoon-violence-rgb: 212 31 35;
  --cartoon-violence-oklch: oklch(0.558 0.212 26.9);
}

.element {
  color: var(--cartoon-violence);
  background-color: hsl(359 74% 48%);
  border-color: oklch(0.558 0.212 26.9);
}

Tailwind CSS v4

@theme {
  --color-cartoon-violence: #d41f23;
  --color-cartoon-violence-50: #ffdfd2;
  --color-cartoon-violence-100: #ffcdbf;
  --color-cartoon-violence-200: #ffb09f;
  --color-cartoon-violence-300: #ff8876;
  --color-cartoon-violence-400: #ff5f55;
  --color-cartoon-violence-500: #f3282b;
  --color-cartoon-violence-600: #cd2627;
  --color-cartoon-violence-700: #a51f1f;
  --color-cartoon-violence-800: #7c1318;
  --color-cartoon-violence-900: #570d0f;
  --color-cartoon-violence-950: #3a0003;
}

SCSS

$cartoon-violence: #d41f23;
$cartoon-violence-rgb: 212, 31, 35;
$cartoon-violence-light: mix(#fff, $cartoon-violence, 20%);
$cartoon-violence-dark: mix(#000, $cartoon-violence, 20%);

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