First of Fall

CSS

:root {
  --first-of-fall: #e47901;
  --first-of-fall-rgb: 228 121 1;
  --first-of-fall-oklch: oklch(0.684 0.166 56.4);
}

.element {
  color: var(--first-of-fall);
  background-color: hsl(32 99% 45%);
  border-color: oklch(0.684 0.166 56.4);
}

Tailwind CSS v4

@theme {
  --color-first-of-fall: #e47901;
  --color-first-of-fall-50: #ffeac7;
  --color-first-of-fall-100: #ffdbb1;
  --color-first-of-fall-200: #ffc38c;
  --color-first-of-fall-300: #f6a15b;
  --color-first-of-fall-400: #e68024;
  --color-first-of-fall-500: #d46000;
  --color-first-of-fall-600: #b35200;
  --color-first-of-fall-700: #904100;
  --color-first-of-fall-800: #6c2e00;
  --color-first-of-fall-900: #4c1f00;
  --color-first-of-fall-950: #320e00;
}

SCSS

$first-of-fall: #e47901;
$first-of-fall-rgb: 228, 121, 1;
$first-of-fall-light: mix(#fff, $first-of-fall, 20%);
$first-of-fall-dark: mix(#000, $first-of-fall, 20%);

.element {
  color: $first-of-fall;
  box-shadow: 0 0 0 2px rgba($first-of-fall, 0.35);
}