Rondo of Blood

CSS

:root {
  --rondo-of-blood: #a60044;
  --rondo-of-blood-rgb: 166 0 68;
  --rondo-of-blood-oklch: oklch(0.464 0.186 8.5);
}

.element {
  color: var(--rondo-of-blood);
  background-color: hsl(335 100% 33%);
  border-color: oklch(0.464 0.186 8.5);
}

Tailwind CSS v4

@theme {
  --color-rondo-of-blood: #a60044;
  --color-rondo-of-blood-50: #ffe0e8;
  --color-rondo-of-blood-100: #ffcfd9;
  --color-rondo-of-blood-200: #ffb2c1;
  --color-rondo-of-blood-300: #ff8ca1;
  --color-rondo-of-blood-400: #f66788;
  --color-rondo-of-blood-500: #e43d6d;
  --color-rondo-of-blood-600: #c1355d;
  --color-rondo-of-blood-700: #9b2b4a;
  --color-rondo-of-blood-800: #731d38;
  --color-rondo-of-blood-900: #511326;
  --color-rondo-of-blood-950: #360415;
}

SCSS

$rondo-of-blood: #a60044;
$rondo-of-blood-rgb: 166, 0, 68;
$rondo-of-blood-light: mix(#fff, $rondo-of-blood, 20%);
$rondo-of-blood-dark: mix(#000, $rondo-of-blood, 20%);

.element {
  color: $rondo-of-blood;
  box-shadow: 0 0 0 2px rgba($rondo-of-blood, 0.35);
}