#C46152

CSS

:root {
  --too-hot-to-handle: #c46152;
  --too-hot-to-handle-rgb: 196 97 82;
  --too-hot-to-handle-oklch: oklch(0.608 0.13 30.2);
}

.element {
  color: var(--too-hot-to-handle);
  background-color: hsl(8 49% 55%);
  border-color: oklch(0.608 0.13 30.2);
}

Tailwind CSS v4

@theme {
  --color-too-hot-to-handle: #c46152;
  --color-too-hot-to-handle-50: #ffe8de;
  --color-too-hot-to-handle-100: #ffd9cd;
  --color-too-hot-to-handle-200: #ffc0b2;
  --color-too-hot-to-handle-300: #f29e8d;
  --color-too-hot-to-handle-400: #e07f70;
  --color-too-hot-to-handle-500: #ce6050;
  --color-too-hot-to-handle-600: #ae5244;
  --color-too-hot-to-handle-700: #8c4136;
  --color-too-hot-to-handle-800: #682e28;
  --color-too-hot-to-handle-900: #491f1b;
  --color-too-hot-to-handle-950: #300f0b;
}

SCSS

$too-hot-to-handle: #c46152;
$too-hot-to-handle-rgb: 196, 97, 82;
$too-hot-to-handle-light: mix(#fff, $too-hot-to-handle, 20%);
$too-hot-to-handle-dark: mix(#000, $too-hot-to-handle, 20%);

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