Deep Fire

CSS

:root {
  --deep-fire: #bf5c42;
  --deep-fire-rgb: 191 92 66;
  --deep-fire-oklch: oklch(0.59 0.134 35.8);
}

.element {
  color: var(--deep-fire);
  background-color: hsl(12 49% 50%);
  border-color: oklch(0.59 0.134 35.8);
}

Tailwind CSS v4

@theme {
  --color-deep-fire: #bf5c42;
  --color-deep-fire-50: #ffe9da;
  --color-deep-fire-100: #ffd9c8;
  --color-deep-fire-200: #ffc1ab;
  --color-deep-fire-300: #f39f85;
  --color-deep-fire-400: #e18066;
  --color-deep-fire-500: #cf6043;
  --color-deep-fire-600: #af523a;
  --color-deep-fire-700: #8c422e;
  --color-deep-fire-800: #692e22;
  --color-deep-fire-900: #4a2016;
  --color-deep-fire-950: #300f08;
}

SCSS

$deep-fire: #bf5c42;
$deep-fire-rgb: 191, 92, 66;
$deep-fire-light: mix(#fff, $deep-fire, 20%);
$deep-fire-dark: mix(#000, $deep-fire, 20%);

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