#8B616A

CSS

:root {
  --royal-fig: #8b616a;
  --royal-fig-rgb: 139 97 106;
  --royal-fig-oklch: oklch(0.539 0.056 5);
}

.element {
  color: var(--royal-fig);
  background-color: hsl(347 18% 46%);
  border-color: oklch(0.539 0.056 5);
}

Tailwind CSS v4

@theme {
  --color-royal-fig: #8b616a;
  --color-royal-fig-50: #ffeff2;
  --color-royal-fig-100: #fae1e5;
  --color-royal-fig-200: #ebcbd0;
  --color-royal-fig-300: #d2acb2;
  --color-royal-fig-400: #bc919a;
  --color-royal-fig-500: #a77781;
  --color-royal-fig-600: #8d656d;
  --color-royal-fig-700: #715057;
  --color-royal-fig-800: #533a40;
  --color-royal-fig-900: #3a282c;
  --color-royal-fig-950: #241619;
}

SCSS

$royal-fig: #8b616a;
$royal-fig-rgb: 139, 97, 106;
$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);
}