Juicy Fig

CSS

:root {
  --juicy-fig: #7d6c4a;
  --juicy-fig-rgb: 125 108 74;
  --juicy-fig-oklch: oklch(0.539 0.053 84.2);
}

.element {
  color: var(--juicy-fig);
  background-color: hsl(40 26% 39%);
  border-color: oklch(0.539 0.053 84.2);
}

Tailwind CSS v4

@theme {
  --color-juicy-fig: #7d6c4a;
  --color-juicy-fig-50: #fcf4e4;
  --color-juicy-fig-100: #f0e7d4;
  --color-juicy-fig-200: #ded3bb;
  --color-juicy-fig-300: #c4b699;
  --color-juicy-fig-400: #ad9c7b;
  --color-juicy-fig-500: #97845d;
  --color-juicy-fig-600: #806f4f;
  --color-juicy-fig-700: #66593f;
  --color-juicy-fig-800: #4c412d;
  --color-juicy-fig-900: #352d1e;
  --color-juicy-fig-950: #201a0e;
}

SCSS

$juicy-fig: #7d6c4a;
$juicy-fig-rgb: 125, 108, 74;
$juicy-fig-light: mix(#fff, $juicy-fig, 20%);
$juicy-fig-dark: mix(#000, $juicy-fig, 20%);

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