#D21024

CSS

:root {
  --cartoon-violence: #d21024;
  --cartoon-violence-rgb: 210 16 36;
  --cartoon-violence-oklch: oklch(0.548 0.216 25.3);
}

.element {
  color: var(--cartoon-violence);
  background-color: hsl(354 86% 44%);
  border-color: oklch(0.548 0.216 25.3);
}

Tailwind CSS v4

@theme {
  --color-cartoon-violence: #d21024;
  --color-cartoon-violence-50: #ffded3;
  --color-cartoon-violence-100: #ffccc0;
  --color-cartoon-violence-200: #ffafa1;
  --color-cartoon-violence-300: #ff8678;
  --color-cartoon-violence-400: #ff5c58;
  --color-cartoon-violence-500: #f52130;
  --color-cartoon-violence-600: #cf212a;
  --color-cartoon-violence-700: #a61b21;
  --color-cartoon-violence-800: #7c101a;
  --color-cartoon-violence-900: #580b11;
  --color-cartoon-violence-950: #3b0004;
}

SCSS

$cartoon-violence: #d21024;
$cartoon-violence-rgb: 210, 16, 36;
$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);
}