Cartoon Violence

CSS

:root {
  --cartoon-violence: #d01722;
  --cartoon-violence-rgb: 208 23 34;
  --cartoon-violence-oklch: oklch(0.547 0.212 26.2);
}

.element {
  color: var(--cartoon-violence);
  background-color: hsl(356 80% 45%);
  border-color: oklch(0.547 0.212 26.2);
}

Tailwind CSS v4

@theme {
  --color-cartoon-violence: #d01722;
  --color-cartoon-violence-50: #ffdfd3;
  --color-cartoon-violence-100: #ffcdc0;
  --color-cartoon-violence-200: #ffb0a1;
  --color-cartoon-violence-300: #ff8878;
  --color-cartoon-violence-400: #ff5e57;
  --color-cartoon-violence-500: #f3272e;
  --color-cartoon-violence-600: #cd2529;
  --color-cartoon-violence-700: #a51f21;
  --color-cartoon-violence-800: #7c131a;
  --color-cartoon-violence-900: #570d10;
  --color-cartoon-violence-950: #3b0004;
}

SCSS

$cartoon-violence: #d01722;
$cartoon-violence-rgb: 208, 23, 34;
$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);
}