Crucified Red

CSS

:root {
  --crucified-red: #cc0044;
  --crucified-red-rgb: 204 0 68;
  --crucified-red-oklch: oklch(0.537 0.215 14.8);
}

.element {
  color: var(--crucified-red);
  background-color: hsl(340 100% 40%);
  border-color: oklch(0.537 0.215 14.8);
}

Tailwind CSS v4

@theme {
  --color-crucified-red: #cc0044;
  --color-crucified-red-50: #ffdddf;
  --color-crucified-red-100: #ffcbce;
  --color-crucified-red-200: #ffadb3;
  --color-crucified-red-300: #ff8490;
  --color-crucified-red-400: #ff5a75;
  --color-crucified-red-500: #f21d57;
  --color-crucified-red-600: #cd1f4a;
  --color-crucified-red-700: #a5193b;
  --color-crucified-red-800: #7b0f2d;
  --color-crucified-red-900: #570a1e;
  --color-crucified-red-950: #3a000e;
}

SCSS

$crucified-red: #cc0044;
$crucified-red-rgb: 204, 0, 68;
$crucified-red-light: mix(#fff, $crucified-red, 20%);
$crucified-red-dark: mix(#000, $crucified-red, 20%);

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