Belly Fire

CSS

:root {
  --belly-fire: #773b38;
  --belly-fire-rgb: 119 59 56;
  --belly-fire-oklch: oklch(0.428 0.085 24.2);
}

.element {
  color: var(--belly-fire);
  background-color: hsl(3 36% 34%);
  border-color: oklch(0.428 0.085 24.2);
}

Tailwind CSS v4

@theme {
  --color-belly-fire: #773b38;
  --color-belly-fire-50: #ffede9;
  --color-belly-fire-100: #ffded9;
  --color-belly-fire-200: #f7c7c1;
  --color-belly-fire-300: #e0a7a1;
  --color-belly-fire-400: #cc8b86;
  --color-belly-fire-500: #b86f6a;
  --color-belly-fire-600: #9b5e5a;
  --color-belly-fire-700: #7d4b48;
  --color-belly-fire-800: #5c3635;
  --color-belly-fire-900: #412524;
  --color-belly-fire-950: #291413;
}

SCSS

$belly-fire: #773b38;
$belly-fire-rgb: 119, 59, 56;
$belly-fire-light: mix(#fff, $belly-fire, 20%);
$belly-fire-dark: mix(#000, $belly-fire, 20%);

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