Rich and Rare

CSS

:root {
  --rich-and-rare: #977540;
  --rich-and-rare-rgb: 151 117 64;
  --rich-and-rare-oklch: oklch(0.584 0.082 77.1);
}

.element {
  color: var(--rich-and-rare);
  background-color: hsl(37 40% 42%);
  border-color: oklch(0.584 0.082 77.1);
}

Tailwind CSS v4

@theme {
  --color-rich-and-rare: #977540;
  --color-rich-and-rare-50: #fff3db;
  --color-rich-and-rare-100: #f7e5ca;
  --color-rich-and-rare-200: #e8d1ad;
  --color-rich-and-rare-300: #ceb388;
  --color-rich-and-rare-400: #ba9866;
  --color-rich-and-rare-500: #a57f43;
  --color-rich-and-rare-600: #8b6b3a;
  --color-rich-and-rare-700: #70562e;
  --color-rich-and-rare-800: #533e20;
  --color-rich-and-rare-900: #3a2b15;
  --color-rich-and-rare-950: #241807;
}

SCSS

$rich-and-rare: #977540;
$rich-and-rare-rgb: 151, 117, 64;
$rich-and-rare-light: mix(#fff, $rich-and-rare, 20%);
$rich-and-rare-dark: mix(#000, $rich-and-rare, 20%);

.element {
  color: $rich-and-rare;
  box-shadow: 0 0 0 2px rgba($rich-and-rare, 0.35);
}