Fire Chalk

CSS

:root {
  --fire-chalk: #d2806c;
  --fire-chalk-rgb: 210 128 108;
  --fire-chalk-oklch: oklch(0.682 0.107 34.5);
}

.element {
  color: var(--fire-chalk);
  background-color: hsl(12 53% 62%);
  border-color: oklch(0.682 0.107 34.5);
}

Tailwind CSS v4

@theme {
  --color-fire-chalk: #d2806c;
  --color-fire-chalk-50: #ffebe0;
  --color-fire-chalk-100: #ffdccf;
  --color-fire-chalk-200: #fec5b5;
  --color-fire-chalk-300: #e8a491;
  --color-fire-chalk-400: #d58774;
  --color-fire-chalk-500: #c26a55;
  --color-fire-chalk-600: #a45a48;
  --color-fire-chalk-700: #844839;
  --color-fire-chalk-800: #62332a;
  --color-fire-chalk-900: #45231c;
  --color-fire-chalk-950: #2c120c;
}

SCSS

$fire-chalk: #d2806c;
$fire-chalk-rgb: 210, 128, 108;
$fire-chalk-light: mix(#fff, $fire-chalk, 20%);
$fire-chalk-dark: mix(#000, $fire-chalk, 20%);

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