Extravagance

CSS

:root {
  --extravagance: #4e4850;
  --extravagance-rgb: 78 72 80;
  --extravagance-oklch: oklch(0.41 0.015 317.7);
}

.element {
  color: var(--extravagance);
  background-color: hsl(285 5% 30%);
  border-color: oklch(0.41 0.015 317.7);
}

Tailwind CSS v4

@theme {
  --color-extravagance: #4e4850;
  --color-extravagance-50: #f7f4f8;
  --color-extravagance-100: #eae6eb;
  --color-extravagance-200: #d7d2d8;
  --color-extravagance-300: #bbb5bc;
  --color-extravagance-400: #a29ca4;
  --color-extravagance-500: #8a838d;
  --color-extravagance-600: #756f77;
  --color-extravagance-700: #5e595f;
  --color-extravagance-800: #444146;
  --color-extravagance-900: #2f2d30;
  --color-extravagance-950: #1c1a1d;
}

SCSS

$extravagance: #4e4850;
$extravagance-rgb: 78, 72, 80;
$extravagance-light: mix(#fff, $extravagance, 20%);
$extravagance-dark: mix(#000, $extravagance, 20%);

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