Heavy Goldbrown

CSS

:root {
  --heavy-goldbrown: #baab74;
  --heavy-goldbrown-rgb: 186 171 116;
  --heavy-goldbrown-oklch: oklch(0.741 0.075 94.7);
}

.element {
  color: var(--heavy-goldbrown);
  background-color: hsl(47 34% 59%);
  border-color: oklch(0.741 0.075 94.7);
}

Tailwind CSS v4

@theme {
  --color-heavy-goldbrown: #baab74;
  --color-heavy-goldbrown-50: #fbf6de;
  --color-heavy-goldbrown-100: #efe8cc;
  --color-heavy-goldbrown-200: #ddd5b1;
  --color-heavy-goldbrown-300: #c2b88c;
  --color-heavy-goldbrown-400: #ac9e6b;
  --color-heavy-goldbrown-500: #968649;
  --color-heavy-goldbrown-600: #7f713f;
  --color-heavy-goldbrown-700: #655a32;
  --color-heavy-goldbrown-800: #4b4223;
  --color-heavy-goldbrown-900: #342d17;
  --color-heavy-goldbrown-950: #201a08;
}

SCSS

$heavy-goldbrown: #baab74;
$heavy-goldbrown-rgb: 186, 171, 116;
$heavy-goldbrown-light: mix(#fff, $heavy-goldbrown, 20%);
$heavy-goldbrown-dark: mix(#000, $heavy-goldbrown, 20%);

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