Another One Bites the Dust

CSS

:root {
  --another-one-bites-the-dust: #c7bba4;
  --another-one-bites-the-dust-rgb: 199 187 164;
  --another-one-bites-the-dust-oklch: oklch(0.796 0.034 83.7);
}

.element {
  color: var(--another-one-bites-the-dust);
  background-color: hsl(39 24% 71%);
  border-color: oklch(0.796 0.034 83.7);
}

Tailwind CSS v4

@theme {
  --color-another-one-bites-the-dust: #c7bba4;
  --color-another-one-bites-the-dust-50: #f9f5ea;
  --color-another-one-bites-the-dust-100: #ede7db;
  --color-another-one-bites-the-dust-200: #dbd3c4;
  --color-another-one-bites-the-dust-300: #bfb7a4;
  --color-another-one-bites-the-dust-400: #a89d88;
  --color-another-one-bites-the-dust-500: #91856d;
  --color-another-one-bites-the-dust-600: #7b705c;
  --color-another-one-bites-the-dust-700: #625a49;
  --color-another-one-bites-the-dust-800: #484135;
  --color-another-one-bites-the-dust-900: #322d24;
  --color-another-one-bites-the-dust-950: #1e1a13;
}

SCSS

$another-one-bites-the-dust: #c7bba4;
$another-one-bites-the-dust-rgb: 199, 187, 164;
$another-one-bites-the-dust-light: mix(#fff, $another-one-bites-the-dust, 20%);
$another-one-bites-the-dust-dark: mix(#000, $another-one-bites-the-dust, 20%);

.element {
  color: $another-one-bites-the-dust;
  box-shadow: 0 0 0 2px rgba($another-one-bites-the-dust, 0.35);
}