Smoking Red

CSS

:root {
  --smoking-red: #992200;
  --smoking-red-rgb: 153 34 0;
  --smoking-red-oklch: oklch(0.448 0.159 34.4);
}

.element {
  color: var(--smoking-red);
  background-color: hsl(13 100% 30%);
  border-color: oklch(0.448 0.159 34.4);
}

Tailwind CSS v4

@theme {
  --color-smoking-red: #992200;
  --color-smoking-red-50: #ffe6d6;
  --color-smoking-red-100: #ffd6c3;
  --color-smoking-red-200: #ffbca5;
  --color-smoking-red-300: #fd997d;
  --color-smoking-red-400: #ed775c;
  --color-smoking-red-500: #db5435;
  --color-smoking-red-600: #b9482e;
  --color-smoking-red-700: #953a25;
  --color-smoking-red-800: #6f281b;
  --color-smoking-red-900: #4e1b12;
  --color-smoking-red-950: #340b04;
}

SCSS

$smoking-red: #992200;
$smoking-red-rgb: 153, 34, 0;
$smoking-red-light: mix(#fff, $smoking-red, 20%);
$smoking-red-dark: mix(#000, $smoking-red, 20%);

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