Cabal

CSS

:root {
  --cabal: #7f6473;
  --cabal-rgb: 127 100 115;
  --cabal-oklch: oklch(0.535 0.041 344.1);
}

.element {
  color: var(--cabal);
  background-color: hsl(327 12% 45%);
  border-color: oklch(0.535 0.041 344.1);
}

Tailwind CSS v4

@theme {
  --color-cabal: #7f6473;
  --color-cabal-50: #fff1f7;
  --color-cabal-100: #f3e3eb;
  --color-cabal-200: #e2ced8;
  --color-cabal-300: #c8afbc;
  --color-cabal-400: #b195a4;
  --color-cabal-500: #9b7c8d;
  --color-cabal-600: #836977;
  --color-cabal-700: #69545f;
  --color-cabal-800: #4d3d46;
  --color-cabal-900: #352a31;
  --color-cabal-950: #20171d;
}

SCSS

$cabal: #7f6473;
$cabal-rgb: 127, 100, 115;
$cabal-light: mix(#fff, $cabal, 20%);
$cabal-dark: mix(#000, $cabal, 20%);

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