Fig Preserves

CSS

:root {
  --fig-preserves: #a7989e;
  --fig-preserves-rgb: 167 152 158;
  --fig-preserves-oklch: oklch(0.695 0.02 351.4);
}

.element {
  color: var(--fig-preserves);
  background-color: hsl(336 8% 63%);
  border-color: oklch(0.695 0.02 351.4);
}

Tailwind CSS v4

@theme {
  --color-fig-preserves: #a7989e;
  --color-fig-preserves-50: #faf3f5;
  --color-fig-preserves-100: #eee5e8;
  --color-fig-preserves-200: #dbd1d5;
  --color-fig-preserves-300: #c0b3b8;
  --color-fig-preserves-400: #a89aa0;
  --color-fig-preserves-500: #918188;
  --color-fig-preserves-600: #7b6d73;
  --color-fig-preserves-700: #62575c;
  --color-fig-preserves-800: #484043;
  --color-fig-preserves-900: #322c2e;
  --color-fig-preserves-950: #1e191b;
}

SCSS

$fig-preserves: #a7989e;
$fig-preserves-rgb: 167, 152, 158;
$fig-preserves-light: mix(#fff, $fig-preserves, 20%);
$fig-preserves-dark: mix(#000, $fig-preserves, 20%);

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