#BC593F

CSS

:root {
  --hot-chilli: #bc593f;
  --hot-chilli-rgb: 188 89 63;
  --hot-chilli-oklch: oklch(0.581 0.134 35.8);
}

.element {
  color: var(--hot-chilli);
  background-color: hsl(12 50% 49%);
  border-color: oklch(0.581 0.134 35.8);
}

Tailwind CSS v4

@theme {
  --color-hot-chilli: #bc593f;
  --color-hot-chilli-50: #ffe9da;
  --color-hot-chilli-100: #ffd9c8;
  --color-hot-chilli-200: #ffc1ab;
  --color-hot-chilli-300: #f39f85;
  --color-hot-chilli-400: #e28066;
  --color-hot-chilli-500: #cf6043;
  --color-hot-chilli-600: #af523a;
  --color-hot-chilli-700: #8c412e;
  --color-hot-chilli-800: #692e22;
  --color-hot-chilli-900: #4a1f16;
  --color-hot-chilli-950: #300f07;
}

SCSS

$hot-chilli: #bc593f;
$hot-chilli-rgb: 188, 89, 63;
$hot-chilli-light: mix(#fff, $hot-chilli, 20%);
$hot-chilli-dark: mix(#000, $hot-chilli, 20%);

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