American Roast

CSS

:root {
  --american-roast: #995544;
  --american-roast-rgb: 153 85 68;
  --american-roast-oklch: oklch(0.525 0.095 35);
}

.element {
  color: var(--american-roast);
  background-color: hsl(12 38% 43%);
  border-color: oklch(0.525 0.095 35);
}

Tailwind CSS v4

@theme {
  --color-american-roast: #995544;
  --color-american-roast-50: #ffece2;
  --color-american-roast-100: #ffded2;
  --color-american-roast-200: #f9c7b8;
  --color-american-roast-300: #e3a795;
  --color-american-roast-400: #d08a78;
  --color-american-roast-500: #bc6e5a;
  --color-american-roast-600: #9f5d4d;
  --color-american-roast-700: #804b3d;
  --color-american-roast-800: #5f362d;
  --color-american-roast-900: #42251e;
  --color-american-roast-950: #2b130e;
}

SCSS

$american-roast: #995544;
$american-roast-rgb: 153, 85, 68;
$american-roast-light: mix(#fff, $american-roast, 20%);
$american-roast-dark: mix(#000, $american-roast, 20%);

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