#AF9B26

CSS

:root {
  --greedy-gecko: #af9b26;
  --greedy-gecko-rgb: 175 155 38;
  --greedy-gecko-oklch: oklch(0.687 0.131 99);
}

.element {
  color: var(--greedy-gecko);
  background-color: hsl(51 64% 42%);
  border-color: oklch(0.687 0.131 99);
}

Tailwind CSS v4

@theme {
  --color-greedy-gecko: #af9b26;
  --color-greedy-gecko-50: #fdf7cc;
  --color-greedy-gecko-100: #f1eab8;
  --color-greedy-gecko-200: #e0d695;
  --color-greedy-gecko-300: #c6ba67;
  --color-greedy-gecko-400: #b29f36;
  --color-greedy-gecko-500: #9c8600;
  --color-greedy-gecko-600: #847100;
  --color-greedy-gecko-700: #6a5b00;
  --color-greedy-gecko-800: #4f4200;
  --color-greedy-gecko-900: #372d00;
  --color-greedy-gecko-950: #221a00;
}

SCSS

$greedy-gecko: #af9b26;
$greedy-gecko-rgb: 175, 155, 38;
$greedy-gecko-light: mix(#fff, $greedy-gecko, 20%);
$greedy-gecko-dark: mix(#000, $greedy-gecko, 20%);

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