Too Hot to Handle

CSS

:root {
  --too-hot-to-handle: #bf6153;
  --too-hot-to-handle-rgb: 191 97 83;
  --too-hot-to-handle-oklch: oklch(0.601 0.124 29.9);
}

.element {
  color: var(--too-hot-to-handle);
  background-color: hsl(8 46% 54%);
  border-color: oklch(0.601 0.124 29.9);
}

Tailwind CSS v4

@theme {
  --color-too-hot-to-handle: #bf6153;
  --color-too-hot-to-handle-50: #ffe9df;
  --color-too-hot-to-handle-100: #ffdace;
  --color-too-hot-to-handle-200: #ffc1b4;
  --color-too-hot-to-handle-300: #f0a090;
  --color-too-hot-to-handle-400: #de8172;
  --color-too-hot-to-handle-500: #cb6253;
  --color-too-hot-to-handle-600: #ab5447;
  --color-too-hot-to-handle-700: #8a4338;
  --color-too-hot-to-handle-800: #66302a;
  --color-too-hot-to-handle-900: #48201c;
  --color-too-hot-to-handle-950: #2f0f0c;
}

SCSS

$too-hot-to-handle: #bf6153;
$too-hot-to-handle-rgb: 191, 97, 83;
$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);
}