Burning Coals

CSS

:root {
  --burning-coals: #f79d72;
  --burning-coals-rgb: 247 157 114;
  --burning-coals-oklch: oklch(0.778 0.122 46);
}

.element {
  color: var(--burning-coals);
  background-color: hsl(19 89% 71%);
  border-color: oklch(0.778 0.122 46);
}

Tailwind CSS v4

@theme {
  --color-burning-coals: #f79d72;
  --color-burning-coals-50: #ffecd7;
  --color-burning-coals-100: #ffdcc5;
  --color-burning-coals-200: #ffc5a7;
  --color-burning-coals-300: #eba480;
  --color-burning-coals-400: #da865e;
  --color-burning-coals-500: #c76939;
  --color-burning-coals-600: #a85931;
  --color-burning-coals-700: #874727;
  --color-burning-coals-800: #65331c;
  --color-burning-coals-900: #472312;
  --color-burning-coals-950: #2e1105;
}

SCSS

$burning-coals: #f79d72;
$burning-coals-rgb: 247, 157, 114;
$burning-coals-light: mix(#fff, $burning-coals, 20%);
$burning-coals-dark: mix(#000, $burning-coals, 20%);

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