Late Afternoon

CSS

:root {
  --late-afternoon: #f8ab33;
  --late-afternoon-rgb: 248 171 51;
  --late-afternoon-oklch: oklch(0.797 0.154 73);
}

.element {
  color: var(--late-afternoon);
  background-color: hsl(37 93% 59%);
  border-color: oklch(0.797 0.154 73);
}

Tailwind CSS v4

@theme {
  --color-late-afternoon: #f8ab33;
  --color-late-afternoon-50: #fff0c5;
  --color-late-afternoon-100: #ffe1af;
  --color-late-afternoon-200: #fbcb88;
  --color-late-afternoon-300: #e5ab55;
  --color-late-afternoon-400: #d58e0d;
  --color-late-afternoon-500: #c27100;
  --color-late-afternoon-600: #a46000;
  --color-late-afternoon-700: #834c00;
  --color-late-afternoon-800: #633600;
  --color-late-afternoon-900: #452500;
  --color-late-afternoon-950: #2d1300;
}

SCSS

$late-afternoon: #f8ab33;
$late-afternoon-rgb: 248, 171, 51;
$late-afternoon-light: mix(#fff, $late-afternoon, 20%);
$late-afternoon-dark: mix(#000, $late-afternoon, 20%);

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