Spill the Beans

CSS

:root {
  --spill-the-beans: #9b351b;
  --spill-the-beans-rgb: 155 53 27;
  --spill-the-beans-oklch: oklch(0.473 0.141 35.1);
}

.element {
  color: var(--spill-the-beans);
  background-color: hsl(12 70% 36%);
  border-color: oklch(0.473 0.141 35.1);
}

Tailwind CSS v4

@theme {
  --color-spill-the-beans: #9b351b;
  --color-spill-the-beans-50: #ffe8d9;
  --color-spill-the-beans-100: #ffd8c7;
  --color-spill-the-beans-200: #ffbfa9;
  --color-spill-the-beans-300: #f69d83;
  --color-spill-the-beans-400: #e57d63;
  --color-spill-the-beans-500: #d35d40;
  --color-spill-the-beans-600: #b24f37;
  --color-spill-the-beans-700: #8f3f2b;
  --color-spill-the-beans-800: #6b2d20;
  --color-spill-the-beans-900: #4b1e15;
  --color-spill-the-beans-950: #310d07;
}

SCSS

$spill-the-beans: #9b351b;
$spill-the-beans-rgb: 155, 53, 27;
$spill-the-beans-light: mix(#fff, $spill-the-beans, 20%);
$spill-the-beans-dark: mix(#000, $spill-the-beans, 20%);

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