#725463

CSS

:root {
  --royal-fig: #725463;
  --royal-fig-rgb: 114 84 99;
  --royal-fig-oklch: oklch(0.482 0.045 347.5);
}

.element {
  color: var(--royal-fig);
  background-color: hsl(330 15% 39%);
  border-color: oklch(0.482 0.045 347.5);
}

Tailwind CSS v4

@theme {
  --color-royal-fig: #725463;
  --color-royal-fig-50: #fff0f7;
  --color-royal-fig-100: #f5e2ea;
  --color-royal-fig-200: #e4cdd7;
  --color-royal-fig-300: #caaebb;
  --color-royal-fig-400: #b494a3;
  --color-royal-fig-500: #9e7a8c;
  --color-royal-fig-600: #856876;
  --color-royal-fig-700: #6b535f;
  --color-royal-fig-800: #4e3c46;
  --color-royal-fig-900: #362930;
  --color-royal-fig-950: #21171d;
}

SCSS

$royal-fig: #725463;
$royal-fig-rgb: 114, 84, 99;
$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);
}