Red Knuckles

CSS

:root {
  --red-knuckles: #dd0011;
  --red-knuckles-rgb: 221 0 17;
  --red-knuckles-oklch: oklch(0.564 0.23 27.8);
}

.element {
  color: var(--red-knuckles);
  background-color: hsl(355 100% 43%);
  border-color: oklch(0.564 0.23 27.8);
}

Tailwind CSS v4

@theme {
  --color-red-knuckles: #dd0011;
  --color-red-knuckles-50: #ffddce;
  --color-red-knuckles-100: #ffcbba;
  --color-red-knuckles-200: #ffac99;
  --color-red-knuckles-300: #ff826e;
  --color-red-knuckles-400: #ff564a;
  --color-red-knuckles-500: #fb0015;
  --color-red-knuckles-600: #d41016;
  --color-red-knuckles-700: #aa0f12;
  --color-red-knuckles-800: #800610;
  --color-red-knuckles-900: #5a060a;
  --color-red-knuckles-950: #3d0001;
}

SCSS

$red-knuckles: #dd0011;
$red-knuckles-rgb: 221, 0, 17;
$red-knuckles-light: mix(#fff, $red-knuckles, 20%);
$red-knuckles-dark: mix(#000, $red-knuckles, 20%);

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