Spanish Gold

CSS

:root {
  --spanish-gold: #b09a4f;
  --spanish-gold-rgb: 176 154 79;
  --spanish-gold-oklch: oklch(0.69 0.099 93.3);
}

.element {
  color: var(--spanish-gold);
  background-color: hsl(46 38% 50%);
  border-color: oklch(0.69 0.099 93.3);
}

Tailwind CSS v4

@theme {
  --color-spanish-gold: #b09a4f;
  --color-spanish-gold-50: #fef6d6;
  --color-spanish-gold-100: #f2e8c3;
  --color-spanish-gold-200: #e1d5a5;
  --color-spanish-gold-300: #c7b77d;
  --color-spanish-gold-400: #b29d57;
  --color-spanish-gold-500: #9c842d;
  --color-spanish-gold-600: #847028;
  --color-spanish-gold-700: #6a5a20;
  --color-spanish-gold-800: #4f4114;
  --color-spanish-gold-900: #372d0d;
  --color-spanish-gold-950: #221a02;
}

SCSS

$spanish-gold: #b09a4f;
$spanish-gold-rgb: 176, 154, 79;
$spanish-gold-light: mix(#fff, $spanish-gold, 20%);
$spanish-gold-dark: mix(#000, $spanish-gold, 20%);

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