Good as Gold

CSS

:root {
  --good-as-gold: #d3ba75;
  --good-as-gold-rgb: 211 186 117;
  --good-as-gold-oklch: oklch(0.795 0.093 90.2);
}

.element {
  color: var(--good-as-gold);
  background-color: hsl(44 52% 64%);
  border-color: oklch(0.795 0.093 90.2);
}

Tailwind CSS v4

@theme {
  --color-good-as-gold: #d3ba75;
  --color-good-as-gold-50: #fef5d8;
  --color-good-as-gold-100: #f3e8c5;
  --color-good-as-gold-200: #e2d4a8;
  --color-good-as-gold-300: #c8b780;
  --color-good-as-gold-400: #b39c5c;
  --color-good-as-gold-500: #9e8335;
  --color-good-as-gold-600: #856f2e;
  --color-good-as-gold-700: #6b5925;
  --color-good-as-gold-800: #504018;
  --color-good-as-gold-900: #372c10;
  --color-good-as-gold-950: #221903;
}

SCSS

$good-as-gold: #d3ba75;
$good-as-gold-rgb: 211, 186, 117;
$good-as-gold-light: mix(#fff, $good-as-gold, 20%);
$good-as-gold-dark: mix(#000, $good-as-gold, 20%);

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