Heavy Orange

CSS

:root {
  --heavy-orange: #ee4328;
  --heavy-orange-rgb: 238 67 40;
  --heavy-orange-oklch: oklch(0.631 0.212 31.8);
}

.element {
  color: var(--heavy-orange);
  background-color: hsl(8 85% 55%);
  border-color: oklch(0.631 0.212 31.8);
}

Tailwind CSS v4

@theme {
  --color-heavy-orange: #ee4328;
  --color-heavy-orange-50: #ffe0ce;
  --color-heavy-orange-100: #ffceba;
  --color-heavy-orange-200: #ffb298;
  --color-heavy-orange-300: #ff8a6c;
  --color-heavy-orange-400: #ff6147;
  --color-heavy-orange-500: #f22d08;
  --color-heavy-orange-600: #cc2a0f;
  --color-heavy-orange-700: #a5220d;
  --color-heavy-orange-800: #7b150d;
  --color-heavy-orange-900: #570e08;
  --color-heavy-orange-950: #3a0000;
}

SCSS

$heavy-orange: #ee4328;
$heavy-orange-rgb: 238, 67, 40;
$heavy-orange-light: mix(#fff, $heavy-orange, 20%);
$heavy-orange-dark: mix(#000, $heavy-orange, 20%);

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