#F87D00

CSS

:root {
  --orange-juice: #f87d00;
  --orange-juice-rgb: 248 125 0;
  --orange-juice-oklch: oklch(0.718 0.181 53.3);
}

.element {
  color: var(--orange-juice);
  background-color: hsl(30 100% 49%);
  border-color: oklch(0.718 0.181 53.3);
}

Tailwind CSS v4

@theme {
  --color-orange-juice: #f87d00;
  --color-orange-juice-50: #ffe8c4;
  --color-orange-juice-100: #ffd9ae;
  --color-orange-juice-200: #ffbf87;
  --color-orange-juice-300: #fd9c54;
  --color-orange-juice-400: #ee7a12;
  --color-orange-juice-500: #dd5700;
  --color-orange-juice-600: #ba4b00;
  --color-orange-juice-700: #963c00;
  --color-orange-juice-800: #702900;
  --color-orange-juice-900: #4f1c00;
  --color-orange-juice-950: #340b00;
}

SCSS

$orange-juice: #f87d00;
$orange-juice-rgb: 248, 125, 0;
$orange-juice-light: mix(#fff, $orange-juice, 20%);
$orange-juice-dark: mix(#000, $orange-juice, 20%);

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