Fig Fruit Mauve

CSS

:root {
  --fig-fruit-mauve: #a98691;
  --fig-fruit-mauve-rgb: 169 134 145;
  --fig-fruit-mauve-oklch: oklch(0.656 0.045 357.7);
}

.element {
  color: var(--fig-fruit-mauve);
  background-color: hsl(341 17% 59%);
  border-color: oklch(0.656 0.045 357.7);
}

Tailwind CSS v4

@theme {
  --color-fig-fruit-mauve: #a98691;
  --color-fig-fruit-mauve-50: #fff0f5;
  --color-fig-fruit-mauve-100: #f6e2e7;
  --color-fig-fruit-mauve-200: #e6cdd3;
  --color-fig-fruit-mauve-300: #ccaeb6;
  --color-fig-fruit-mauve-400: #b6949e;
  --color-fig-fruit-mauve-500: #a07a86;
  --color-fig-fruit-mauve-600: #876771;
  --color-fig-fruit-mauve-700: #6c535b;
  --color-fig-fruit-mauve-800: #503c43;
  --color-fig-fruit-mauve-900: #37292e;
  --color-fig-fruit-mauve-950: #22171b;
}

SCSS

$fig-fruit-mauve: #a98691;
$fig-fruit-mauve-rgb: 169, 134, 145;
$fig-fruit-mauve-light: mix(#fff, $fig-fruit-mauve, 20%);
$fig-fruit-mauve-dark: mix(#000, $fig-fruit-mauve, 20%);

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