Fig

CSS

:root {
  --fig: #5a3140;
  --fig-rgb: 90 49 64;
  --fig-oklch: oklch(0.37 0.063 357.2);
}

.element {
  color: var(--fig);
  background-color: hsl(338 29% 27%);
  border-color: oklch(0.37 0.063 357.2);
}

Tailwind CSS v4

@theme {
  --color-fig: #5a3140;
  --color-fig-50: #ffeef4;
  --color-fig-100: #fbe0e7;
  --color-fig-200: #eccad3;
  --color-fig-300: #d4abb6;
  --color-fig-400: #be8f9f;
  --color-fig-500: #a97586;
  --color-fig-600: #8f6372;
  --color-fig-700: #724f5b;
  --color-fig-800: #543943;
  --color-fig-900: #3b272e;
  --color-fig-950: #25151b;
}

SCSS

$fig: #5a3140;
$fig-rgb: 90, 49, 64;
$fig-light: mix(#fff, $fig, 20%);
$fig-dark: mix(#000, $fig, 20%);

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