Crushed Violets

CSS

:root {
  --crushed-violets: #673c4c;
  --crushed-violets-rgb: 103 60 76;
  --crushed-violets-oklch: oklch(0.413 0.064 356.4);
}

.element {
  color: var(--crushed-violets);
  background-color: hsl(338 26% 32%);
  border-color: oklch(0.413 0.064 356.4);
}

Tailwind CSS v4

@theme {
  --color-crushed-violets: #673c4c;
  --color-crushed-violets-50: #ffeef5;
  --color-crushed-violets-100: #fbe0e7;
  --color-crushed-violets-200: #edc9d4;
  --color-crushed-violets-300: #d4aab7;
  --color-crushed-violets-400: #be8f9f;
  --color-crushed-violets-500: #a97487;
  --color-crushed-violets-600: #8f6372;
  --color-crushed-violets-700: #734f5b;
  --color-crushed-violets-800: #543944;
  --color-crushed-violets-900: #3b272f;
  --color-crushed-violets-950: #25151b;
}

SCSS

$crushed-violets: #673c4c;
$crushed-violets-rgb: 103, 60, 76;
$crushed-violets-light: mix(#fff, $crushed-violets, 20%);
$crushed-violets-dark: mix(#000, $crushed-violets, 20%);

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