Late Day Sun

CSS

:root {
  --late-day-sun: #f2e08e;
  --late-day-sun-rgb: 242 224 142;
  --late-day-sun-oklch: oklch(0.903 0.104 97.3);
}

.element {
  color: var(--late-day-sun);
  background-color: hsl(49 79% 75%);
  border-color: oklch(0.903 0.104 97.3);
}

Tailwind CSS v4

@theme {
  --color-late-day-sun: #f2e08e;
  --color-late-day-sun-50: #fcf6d5;
  --color-late-day-sun-100: #f0e9c2;
  --color-late-day-sun-200: #dfd6a3;
  --color-late-day-sun-300: #c4b97a;
  --color-late-day-sun-400: #af9f53;
  --color-late-day-sun-500: #998625;
  --color-late-day-sun-600: #827122;
  --color-late-day-sun-700: #685b1b;
  --color-late-day-sun-800: #4d4211;
  --color-late-day-sun-900: #362d0a;
  --color-late-day-sun-950: #211a01;
}

SCSS

$late-day-sun: #f2e08e;
$late-day-sun-rgb: 242, 224, 142;
$late-day-sun-light: mix(#fff, $late-day-sun, 20%);
$late-day-sun-dark: mix(#000, $late-day-sun, 20%);

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