Arcade Fire

CSS

:root {
  --arcade-fire: #ee3311;
  --arcade-fire-rgb: 238 51 17;
  --arcade-fire-oklch: oklch(0.617 0.225 32);
}

.element {
  color: var(--arcade-fire);
  background-color: hsl(9 87% 50%);
  border-color: oklch(0.617 0.225 32);
}

Tailwind CSS v4

@theme {
  --color-arcade-fire: #ee3311;
  --color-arcade-fire-50: #ffdecb;
  --color-arcade-fire-100: #ffcdb6;
  --color-arcade-fire-200: #ffaf93;
  --color-arcade-fire-300: #ff8665;
  --color-arcade-fire-400: #ff5b3e;
  --color-arcade-fire-500: #f81a00;
  --color-arcade-fire-600: #d11d00;
  --color-arcade-fire-700: #a91800;
  --color-arcade-fire-800: #7e0d05;
  --color-arcade-fire-900: #590904;
  --color-arcade-fire-950: #3c0000;
}

SCSS

$arcade-fire: #ee3311;
$arcade-fire-rgb: 238, 51, 17;
$arcade-fire-light: mix(#fff, $arcade-fire, 20%);
$arcade-fire-dark: mix(#000, $arcade-fire, 20%);

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