Fall Gold

CSS

:root {
  --fall-gold: #ffbc35;
  --fall-gold-rgb: 255 188 53;
  --fall-gold-oklch: oklch(0.836 0.159 79.9);
}

.element {
  color: var(--fall-gold);
  background-color: hsl(40 100% 60%);
  border-color: oklch(0.836 0.159 79.9);
}

Tailwind CSS v4

@theme {
  --color-fall-gold: #ffbc35;
  --color-fall-gold-50: #fff2c2;
  --color-fall-gold-100: #ffe3ab;
  --color-fall-gold-200: #f6ce84;
  --color-fall-gold-300: #e0af4e;
  --color-fall-gold-400: #cf9200;
  --color-fall-gold-500: #bc7500;
  --color-fall-gold-600: #9e6400;
  --color-fall-gold-700: #7f5000;
  --color-fall-gold-800: #603900;
  --color-fall-gold-900: #432700;
  --color-fall-gold-950: #2b1500;
}

SCSS

$fall-gold: #ffbc35;
$fall-gold-rgb: 255, 188, 53;
$fall-gold-light: mix(#fff, $fall-gold, 20%);
$fall-gold-dark: mix(#000, $fall-gold, 20%);

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