Fall Meadow

CSS

:root {
  --fall-meadow: #e6c94c;
  --fall-meadow-rgb: 230 201 76;
  --fall-meadow-oklch: oklch(0.838 0.144 96);
}

.element {
  color: var(--fall-meadow);
  background-color: hsl(49 75% 60%);
  border-color: oklch(0.838 0.144 96);
}

Tailwind CSS v4

@theme {
  --color-fall-meadow: #e6c94c;
  --color-fall-meadow-50: #fff6c7;
  --color-fall-meadow-100: #f4e9b2;
  --color-fall-meadow-200: #e4d58d;
  --color-fall-meadow-300: #cbb85c;
  --color-fall-meadow-400: #b89d1c;
  --color-fall-meadow-500: #a38300;
  --color-fall-meadow-600: #8a6f00;
  --color-fall-meadow-700: #6e5900;
  --color-fall-meadow-800: #534000;
  --color-fall-meadow-900: #3a2c00;
  --color-fall-meadow-950: #241900;
}

SCSS

$fall-meadow: #e6c94c;
$fall-meadow-rgb: 230, 201, 76;
$fall-meadow-light: mix(#fff, $fall-meadow, 20%);
$fall-meadow-dark: mix(#000, $fall-meadow, 20%);

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