Osage Orange

CSS

:root {
  --osage-orange: #f4a045;
  --osage-orange-rgb: 244 160 69;
  --osage-orange-oklch: oklch(0.774 0.144 64.6);
}

.element {
  color: var(--osage-orange);
  background-color: hsl(31 89% 61%);
  border-color: oklch(0.774 0.144 64.6);
}

Tailwind CSS v4

@theme {
  --color-osage-orange: #f4a045;
  --color-osage-orange-50: #ffeeca;
  --color-osage-orange-100: #ffdfb5;
  --color-osage-orange-200: #ffc992;
  --color-osage-orange-300: #e9a863;
  --color-osage-orange-400: #d88a33;
  --color-osage-orange-500: #c56d00;
  --color-osage-orange-600: #a75d00;
  --color-osage-orange-700: #864a00;
  --color-osage-orange-800: #643500;
  --color-osage-orange-900: #462400;
  --color-osage-orange-950: #2e1200;
}

SCSS

$osage-orange: #f4a045;
$osage-orange-rgb: 244, 160, 69;
$osage-orange-light: mix(#fff, $osage-orange, 20%);
$osage-orange-dark: mix(#000, $osage-orange, 20%);

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