Green Fig

CSS

:root {
  --green-fig: #b3a476;
  --green-fig-rgb: 179 164 118;
  --green-fig-oklch: oklch(0.72 0.065 92.1);
}

.element {
  color: var(--green-fig);
  background-color: hsl(45 29% 58%);
  border-color: oklch(0.72 0.065 92.1);
}

Tailwind CSS v4

@theme {
  --color-green-fig: #b3a476;
  --color-green-fig-50: #fbf5e1;
  --color-green-fig-100: #efe8d0;
  --color-green-fig-200: #ddd4b6;
  --color-green-fig-300: #c2b792;
  --color-green-fig-400: #ac9e72;
  --color-green-fig-500: #958553;
  --color-green-fig-600: #7e7147;
  --color-green-fig-700: #655a38;
  --color-green-fig-800: #4b4228;
  --color-green-fig-900: #342d1b;
  --color-green-fig-950: #1f1a0b;
}

SCSS

$green-fig: #b3a476;
$green-fig-rgb: 179, 164, 118;
$green-fig-light: mix(#fff, $green-fig, 20%);
$green-fig-dark: mix(#000, $green-fig, 20%);

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