#7F5662

CSS

:root {
  --royal-fig: #7f5662;
  --royal-fig-rgb: 127 86 98;
  --royal-fig-oklch: oklch(0.501 0.057 0.2);
}

.element {
  color: var(--royal-fig);
  background-color: hsl(342 19% 42%);
  border-color: oklch(0.501 0.057 0.2);
}

Tailwind CSS v4

@theme {
  --color-royal-fig: #7f5662;
  --color-royal-fig-50: #ffeff4;
  --color-royal-fig-100: #f9e0e6;
  --color-royal-fig-200: #eacbd2;
  --color-royal-fig-300: #d2acb5;
  --color-royal-fig-400: #bc919d;
  --color-royal-fig-500: #a67784;
  --color-royal-fig-600: #8d6570;
  --color-royal-fig-700: #71505a;
  --color-royal-fig-800: #533a42;
  --color-royal-fig-900: #3a282e;
  --color-royal-fig-950: #24161a;
}

SCSS

$royal-fig: #7f5662;
$royal-fig-rgb: 127, 86, 98;
$royal-fig-light: mix(#fff, $royal-fig, 20%);
$royal-fig-dark: mix(#000, $royal-fig, 20%);

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