Glitz and Glamour

CSS

:root {
  --glitz-and-glamour: #965f73;
  --glitz-and-glamour-rgb: 150 95 115;
  --glitz-and-glamour-oklch: oklch(0.552 0.076 356.5);
}

.element {
  color: var(--glitz-and-glamour);
  background-color: hsl(338 22% 48%);
  border-color: oklch(0.552 0.076 356.5);
}

Tailwind CSS v4

@theme {
  --color-glitz-and-glamour: #965f73;
  --color-glitz-and-glamour-50: #ffedf5;
  --color-glitz-and-glamour-100: #ffdee7;
  --color-glitz-and-glamour-200: #f1c7d4;
  --color-glitz-and-glamour-300: #d9a8b7;
  --color-glitz-and-glamour-400: #c48c9f;
  --color-glitz-and-glamour-500: #af7187;
  --color-glitz-and-glamour-600: #946072;
  --color-glitz-and-glamour-700: #774c5c;
  --color-glitz-and-glamour-800: #573744;
  --color-glitz-and-glamour-900: #3d262f;
  --color-glitz-and-glamour-950: #26141b;
}

SCSS

$glitz-and-glamour: #965f73;
$glitz-and-glamour-rgb: 150, 95, 115;
$glitz-and-glamour-light: mix(#fff, $glitz-and-glamour, 20%);
$glitz-and-glamour-dark: mix(#000, $glitz-and-glamour, 20%);

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