Afternoon

CSS

:root {
  --afternoon: #fbcb78;
  --afternoon-rgb: 251 203 120;
  --afternoon-oklch: oklch(0.867 0.115 80);
}

.element {
  color: var(--afternoon);
  background-color: hsl(38 94% 73%);
  border-color: oklch(0.867 0.115 80);
}

Tailwind CSS v4

@theme {
  --color-afternoon: #fbcb78;
  --color-afternoon-50: #fff3d1;
  --color-afternoon-100: #fbe5bd;
  --color-afternoon-200: #edd09c;
  --color-afternoon-300: #d5b272;
  --color-afternoon-400: #c29648;
  --color-afternoon-500: #ae7c08;
  --color-afternoon-600: #93690f;
  --color-afternoon-700: #76540d;
  --color-afternoon-800: #583d07;
  --color-afternoon-900: #3d2a05;
  --color-afternoon-950: #271700;
}

SCSS

$afternoon: #fbcb78;
$afternoon-rgb: 251, 203, 120;
$afternoon-light: mix(#fff, $afternoon, 20%);
$afternoon-dark: mix(#000, $afternoon, 20%);

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