#D51923

CSS

:root {
  --cartoon-violence: #d51923;
  --cartoon-violence-rgb: 213 25 35;
  --cartoon-violence-oklch: oklch(0.557 0.216 26.3);
}

.element {
  color: var(--cartoon-violence);
  background-color: hsl(357 79% 47%);
  border-color: oklch(0.557 0.216 26.3);
}

Tailwind CSS v4

@theme {
  --color-cartoon-violence: #d51923;
  --color-cartoon-violence-50: #ffded3;
  --color-cartoon-violence-100: #ffcdbf;
  --color-cartoon-violence-200: #ffaf9f;
  --color-cartoon-violence-300: #ff8776;
  --color-cartoon-violence-400: #ff5d55;
  --color-cartoon-violence-500: #f4232c;
  --color-cartoon-violence-600: #ce2227;
  --color-cartoon-violence-700: #a61c1f;
  --color-cartoon-violence-800: #7c1118;
  --color-cartoon-violence-900: #580b10;
  --color-cartoon-violence-950: #3b0003;
}

SCSS

$cartoon-violence: #d51923;
$cartoon-violence-rgb: 213, 25, 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);
}