Rich Reward

CSS

:root {
  --rich-reward: #b9a37f;
  --rich-reward-rgb: 185 163 127;
  --rich-reward-oklch: oklch(0.726 0.056 79.9);
}

.element {
  color: var(--rich-reward);
  background-color: hsl(37 29% 61%);
  border-color: oklch(0.726 0.056 79.9);
}

Tailwind CSS v4

@theme {
  --color-rich-reward: #b9a37f;
  --color-rich-reward-50: #fdf4e4;
  --color-rich-reward-100: #f1e7d4;
  --color-rich-reward-200: #e0d2ba;
  --color-rich-reward-300: #c6b598;
  --color-rich-reward-400: #b09b79;
  --color-rich-reward-500: #9a825c;
  --color-rich-reward-600: #826e4e;
  --color-rich-reward-700: #68583e;
  --color-rich-reward-800: #4d402c;
  --color-rich-reward-900: #362c1e;
  --color-rich-reward-950: #21190e;
}

SCSS

$rich-reward: #b9a37f;
$rich-reward-rgb: 185, 163, 127;
$rich-reward-light: mix(#fff, $rich-reward, 20%);
$rich-reward-dark: mix(#000, $rich-reward, 20%);

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