Hot Shot

CSS

:root {
  --hot-shot: #ec4f28;
  --hot-shot-rgb: 236 79 40;
  --hot-shot-oklch: oklch(0.64 0.2 34.7);
}

.element {
  color: var(--hot-shot);
  background-color: hsl(12 84% 54%);
  border-color: oklch(0.64 0.2 34.7);
}

Tailwind CSS v4

@theme {
  --color-hot-shot: #ec4f28;
  --color-hot-shot-50: #ffe2cd;
  --color-hot-shot-100: #ffd1b9;
  --color-hot-shot-200: #ffb597;
  --color-hot-shot-300: #ff8f6b;
  --color-hot-shot-400: #fd6844;
  --color-hot-shot-500: #ed3b00;
  --color-hot-shot-600: #c83408;
  --color-hot-shot-700: #a12a08;
  --color-hot-shot-800: #781c0a;
  --color-hot-shot-900: #551306;
  --color-hot-shot-950: #390300;
}

SCSS

$hot-shot: #ec4f28;
$hot-shot-rgb: 236, 79, 40;
$hot-shot-light: mix(#fff, $hot-shot, 20%);
$hot-shot-dark: mix(#000, $hot-shot, 20%);

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