The Sickener

CSS

:root {
  --the-sickener: #db7093;
  --the-sickener-rgb: 219 112 147;
  --the-sickener-oklch: oklch(0.678 0.138 0.7);
}

.element {
  color: var(--the-sickener);
  background-color: hsl(340 60% 65%);
  border-color: oklch(0.678 0.138 0.7);
}

Tailwind CSS v4

@theme {
  --color-the-sickener: #db7093;
  --color-the-sickener-50: #ffe5f1;
  --color-the-sickener-100: #ffd5e4;
  --color-the-sickener-200: #ffbccf;
  --color-the-sickener-300: #f399b1;
  --color-the-sickener-400: #e0799a;
  --color-the-sickener-500: #cd5981;
  --color-the-sickener-600: #ad4c6d;
  --color-the-sickener-700: #8b3c57;
  --color-the-sickener-800: #672b42;
  --color-the-sickener-900: #481d2d;
  --color-the-sickener-950: #2f0d1a;
}

SCSS

$the-sickener: #db7093;
$the-sickener-rgb: 219, 112, 147;
$the-sickener-light: mix(#fff, $the-sickener, 20%);
$the-sickener-dark: mix(#000, $the-sickener, 20%);

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