Horn of Plenty

CSS

:root {
  --horn-of-plenty: #bba46d;
  --horn-of-plenty-rgb: 187 164 109;
  --horn-of-plenty-oklch: oklch(0.726 0.078 87.7);
}

.element {
  color: var(--horn-of-plenty);
  background-color: hsl(42 36% 58%);
  border-color: oklch(0.726 0.078 87.7);
}

Tailwind CSS v4

@theme {
  --color-horn-of-plenty: #bba46d;
  --color-horn-of-plenty-50: #fef5dd;
  --color-horn-of-plenty-100: #f2e7cb;
  --color-horn-of-plenty-200: #e1d3af;
  --color-horn-of-plenty-300: #c7b68a;
  --color-horn-of-plenty-400: #b29c68;
  --color-horn-of-plenty-500: #9c8346;
  --color-horn-of-plenty-600: #846f3c;
  --color-horn-of-plenty-700: #695930;
  --color-horn-of-plenty-800: #4e4021;
  --color-horn-of-plenty-900: #372c16;
  --color-horn-of-plenty-950: #211907;
}

SCSS

$horn-of-plenty: #bba46d;
$horn-of-plenty-rgb: 187, 164, 109;
$horn-of-plenty-light: mix(#fff, $horn-of-plenty, 20%);
$horn-of-plenty-dark: mix(#000, $horn-of-plenty, 20%);

.element {
  color: $horn-of-plenty;
  box-shadow: 0 0 0 2px rgba($horn-of-plenty, 0.35);
}