Hit the Hay

CSS

:root {
  --hit-the-hay: #efc872;
  --hit-the-hay-rgb: 239 200 114;
  --hit-the-hay-oklch: oklch(0.849 0.114 85.6);
}

.element {
  color: var(--hit-the-hay);
  background-color: hsl(41 80% 69%);
  border-color: oklch(0.849 0.114 85.6);
}

Tailwind CSS v4

@theme {
  --color-hit-the-hay: #efc872;
  --color-hit-the-hay-50: #fff4d1;
  --color-hit-the-hay-100: #f8e6bd;
  --color-hit-the-hay-200: #e9d29c;
  --color-hit-the-hay-300: #d0b472;
  --color-hit-the-hay-400: #bd9948;
  --color-hit-the-hay-500: #a87f07;
  --color-hit-the-hay-600: #8e6c0f;
  --color-hit-the-hay-700: #72560d;
  --color-hit-the-hay-800: #553e07;
  --color-hit-the-hay-900: #3b2b05;
  --color-hit-the-hay-950: #251800;
}

SCSS

$hit-the-hay: #efc872;
$hit-the-hay-rgb: 239, 200, 114;
$hit-the-hay-light: mix(#fff, $hit-the-hay, 20%);
$hit-the-hay-dark: mix(#000, $hit-the-hay, 20%);

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