Fire Roasted

CSS

:root {
  --fire-roasted: #79483e;
  --fire-roasted-rgb: 121 72 62;
  --fire-roasted-oklch: oklch(0.456 0.07 32.3);
}

.element {
  color: var(--fire-roasted);
  background-color: hsl(10 32% 36%);
  border-color: oklch(0.456 0.07 32.3);
}

Tailwind CSS v4

@theme {
  --color-fire-roasted: #79483e;
  --color-fire-roasted-50: #ffefe8;
  --color-fire-roasted-100: #fee0d9;
  --color-fire-roasted-200: #f0cac1;
  --color-fire-roasted-300: #d8aba0;
  --color-fire-roasted-400: #c49085;
  --color-fire-roasted-500: #af7569;
  --color-fire-roasted-600: #946359;
  --color-fire-roasted-700: #774f47;
  --color-fire-roasted-800: #583934;
  --color-fire-roasted-900: #3e2723;
  --color-fire-roasted-950: #271512;
}

SCSS

$fire-roasted: #79483e;
$fire-roasted-rgb: 121, 72, 62;
$fire-roasted-light: mix(#fff, $fire-roasted, 20%);
$fire-roasted-dark: mix(#000, $fire-roasted, 20%);

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