Power Tie

CSS

:root {
  --power-tie: #66303c;
  --power-tie-rgb: 102 48 60;
  --power-tie-oklch: oklch(0.385 0.079 7.4);
}

.element {
  color: var(--power-tie);
  background-color: hsl(347 36% 29%);
  border-color: oklch(0.385 0.079 7.4);
}

Tailwind CSS v4

@theme {
  --color-power-tie: #66303c;
  --color-power-tie-50: #ffecf0;
  --color-power-tie-100: #ffdee2;
  --color-power-tie-200: #f4c7cd;
  --color-power-tie-300: #dca7af;
  --color-power-tie-400: #c78b96;
  --color-power-tie-500: #b3707d;
  --color-power-tie-600: #975f6a;
  --color-power-tie-700: #794c54;
  --color-power-tie-800: #5a373e;
  --color-power-tie-900: #3f252b;
  --color-power-tie-950: #281418;
}

SCSS

$power-tie: #66303c;
$power-tie-rgb: 102, 48, 60;
$power-tie-light: mix(#fff, $power-tie, 20%);
$power-tie-dark: mix(#000, $power-tie, 20%);

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