Dark Humour

CSS

:root {
  --dark-humour: #661122;
  --dark-humour-rgb: 102 17 34;
  --dark-humour-oklch: oklch(0.337 0.117 15.7);
}

.element {
  color: var(--dark-humour);
  background-color: hsl(348 71% 23%);
  border-color: oklch(0.337 0.117 15.7);
}

Tailwind CSS v4

@theme {
  --color-dark-humour: #661122;
  --color-dark-humour-50: #ffe8e9;
  --color-dark-humour-100: #ffd9d9;
  --color-dark-humour-200: #ffc1c2;
  --color-dark-humour-300: #ed9fa1;
  --color-dark-humour-400: #db8187;
  --color-dark-humour-500: #c7626c;
  --color-dark-humour-600: #a8545c;
  --color-dark-humour-700: #874349;
  --color-dark-humour-800: #643036;
  --color-dark-humour-900: #472025;
  --color-dark-humour-950: #2e0f14;
}

SCSS

$dark-humour: #661122;
$dark-humour-rgb: 102, 17, 34;
$dark-humour-light: mix(#fff, $dark-humour, 20%);
$dark-humour-dark: mix(#000, $dark-humour, 20%);

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