Speaking of the Devil

CSS

:root {
  --speaking-of-the-devil: #a8415b;
  --speaking-of-the-devil-rgb: 168 65 91;
  --speaking-of-the-devil-oklch: oklch(0.522 0.137 7.6);
}

.element {
  color: var(--speaking-of-the-devil);
  background-color: hsl(345 44% 46%);
  border-color: oklch(0.522 0.137 7.6);
}

Tailwind CSS v4

@theme {
  --color-speaking-of-the-devil: #a8415b;
  --color-speaking-of-the-devil-50: #ffe6ec;
  --color-speaking-of-the-devil-100: #ffd6de;
  --color-speaking-of-the-devil-200: #ffbcc7;
  --color-speaking-of-the-devil-300: #f499a8;
  --color-speaking-of-the-devil-400: #e27a90;
  --color-speaking-of-the-devil-500: #cf5975;
  --color-speaking-of-the-devil-600: #af4c64;
  --color-speaking-of-the-devil-700: #8c3d4f;
  --color-speaking-of-the-devil-800: #682b3b;
  --color-speaking-of-the-devil-900: #491d29;
  --color-speaking-of-the-devil-950: #300d17;
}

SCSS

$speaking-of-the-devil: #a8415b;
$speaking-of-the-devil-rgb: 168, 65, 91;
$speaking-of-the-devil-light: mix(#fff, $speaking-of-the-devil, 20%);
$speaking-of-the-devil-dark: mix(#000, $speaking-of-the-devil, 20%);

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