Fall River

CSS

:root {
  --fall-river: #f59344;
  --fall-river-rgb: 245 147 68;
  --fall-river-oklch: oklch(0.752 0.15 56.4);
}

.element {
  color: var(--fall-river);
  background-color: hsl(27 90% 61%);
  border-color: oklch(0.752 0.15 56.4);
}

Tailwind CSS v4

@theme {
  --color-fall-river: #f59344;
  --color-fall-river-50: #ffeccb;
  --color-fall-river-100: #ffdcb7;
  --color-fall-river-200: #ffc594;
  --color-fall-river-300: #f0a466;
  --color-fall-river-400: #e0843a;
  --color-fall-river-500: #cd6500;
  --color-fall-river-600: #ad5600;
  --color-fall-river-700: #8b4500;
  --color-fall-river-800: #683100;
  --color-fall-river-900: #492100;
  --color-fall-river-950: #301000;
}

SCSS

$fall-river: #f59344;
$fall-river-rgb: 245, 147, 68;
$fall-river-light: mix(#fff, $fall-river, 20%);
$fall-river-dark: mix(#000, $fall-river, 20%);

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