Best of the Bunch

CSS

:root {
  --best-of-the-bunch: #bd5442;
  --best-of-the-bunch-rgb: 189 84 66;
  --best-of-the-bunch-oklch: oklch(0.576 0.139 31.6);
}

.element {
  color: var(--best-of-the-bunch);
  background-color: hsl(9 48% 50%);
  border-color: oklch(0.576 0.139 31.6);
}

Tailwind CSS v4

@theme {
  --color-best-of-the-bunch: #bd5442;
  --color-best-of-the-bunch-50: #ffe8dc;
  --color-best-of-the-bunch-100: #ffd8ca;
  --color-best-of-the-bunch-200: #ffbfae;
  --color-best-of-the-bunch-300: #f69d88;
  --color-best-of-the-bunch-400: #e57d6a;
  --color-best-of-the-bunch-500: #d25c48;
  --color-best-of-the-bunch-600: #b14f3e;
  --color-best-of-the-bunch-700: #8f3f31;
  --color-best-of-the-bunch-800: #6a2c24;
  --color-best-of-the-bunch-900: #4b1e18;
  --color-best-of-the-bunch-950: #310d09;
}

SCSS

$best-of-the-bunch: #bd5442;
$best-of-the-bunch-rgb: 189, 84, 66;
$best-of-the-bunch-light: mix(#fff, $best-of-the-bunch, 20%);
$best-of-the-bunch-dark: mix(#000, $best-of-the-bunch, 20%);

.element {
  color: $best-of-the-bunch;
  box-shadow: 0 0 0 2px rgba($best-of-the-bunch, 0.35);
}