Remaining Embers

CSS

:root {
  --remaining-embers: #8a4c38;
  --remaining-embers-rgb: 138 76 56;
  --remaining-embers-oklch: oklch(0.486 0.09 38.6);
}

.element {
  color: var(--remaining-embers);
  background-color: hsl(15 42% 38%);
  border-color: oklch(0.486 0.09 38.6);
}

Tailwind CSS v4

@theme {
  --color-remaining-embers: #8a4c38;
  --color-remaining-embers-50: #ffede2;
  --color-remaining-embers-100: #ffdfd2;
  --color-remaining-embers-200: #f7c8b7;
  --color-remaining-embers-300: #e0a995;
  --color-remaining-embers-400: #cd8c77;
  --color-remaining-embers-500: #b97059;
  --color-remaining-embers-600: #9c5f4c;
  --color-remaining-embers-700: #7d4c3c;
  --color-remaining-embers-800: #5d372c;
  --color-remaining-embers-900: #41251e;
  --color-remaining-embers-950: #2a140e;
}

SCSS

$remaining-embers: #8a4c38;
$remaining-embers-rgb: 138, 76, 56;
$remaining-embers-light: mix(#fff, $remaining-embers, 20%);
$remaining-embers-dark: mix(#000, $remaining-embers, 20%);

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