Dark Fig Violet

CSS

:root {
  --dark-fig-violet: #573b4c;
  --dark-fig-violet-rgb: 87 59 76;
  --dark-fig-violet-oklch: oklch(0.39 0.047 342.4);
}

.element {
  color: var(--dark-fig-violet);
  background-color: hsl(324 19% 29%);
  border-color: oklch(0.39 0.047 342.4);
}

Tailwind CSS v4

@theme {
  --color-dark-fig-violet: #573b4c;
  --color-dark-fig-violet-50: #fff0f8;
  --color-dark-fig-violet-100: #f4e2ec;
  --color-dark-fig-violet-200: #e4cdd9;
  --color-dark-fig-violet-300: #caaebd;
  --color-dark-fig-violet-400: #b394a6;
  --color-dark-fig-violet-500: #9d7a8f;
  --color-dark-fig-violet-600: #856779;
  --color-dark-fig-violet-700: #6a5361;
  --color-dark-fig-violet-800: #4e3c47;
  --color-dark-fig-violet-900: #362931;
  --color-dark-fig-violet-950: #21171d;
}

SCSS

$dark-fig-violet: #573b4c;
$dark-fig-violet-rgb: 87, 59, 76;
$dark-fig-violet-light: mix(#fff, $dark-fig-violet, 20%);
$dark-fig-violet-dark: mix(#000, $dark-fig-violet, 20%);

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