#795465

CSS

:root {
  --royal-fig: #795465;
  --royal-fig-rgb: 121 84 101;
  --royal-fig-oklch: oklch(0.491 0.055 350.1);
}

.element {
  color: var(--royal-fig);
  background-color: hsl(332 18% 40%);
  border-color: oklch(0.491 0.055 350.1);
}

Tailwind CSS v4

@theme {
  --color-royal-fig: #795465;
  --color-royal-fig-50: #ffeff7;
  --color-royal-fig-100: #f8e1ea;
  --color-royal-fig-200: #e8cbd7;
  --color-royal-fig-300: #cfacba;
  --color-royal-fig-400: #b892a3;
  --color-royal-fig-500: #a3788b;
  --color-royal-fig-600: #8a6576;
  --color-royal-fig-700: #6e515e;
  --color-royal-fig-800: #513b46;
  --color-royal-fig-900: #382830;
  --color-royal-fig-950: #23161c;
}

SCSS

$royal-fig: #795465;
$royal-fig-rgb: 121, 84, 101;
$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);
}