Amethyst Dark Violet

CSS

:root {
  --amethyst-dark-violet: #4f3c52;
  --amethyst-dark-violet-rgb: 79 60 82;
  --amethyst-dark-violet-oklch: oklch(0.385 0.044 321.8);
}

.element {
  color: var(--amethyst-dark-violet);
  background-color: hsl(292 15% 28%);
  border-color: oklch(0.385 0.044 321.8);
}

Tailwind CSS v4

@theme {
  --color-amethyst-dark-violet: #4f3c52;
  --color-amethyst-dark-violet-50: #fcf1fc;
  --color-amethyst-dark-violet-100: #f0e3f0;
  --color-amethyst-dark-violet-200: #decedf;
  --color-amethyst-dark-violet-300: #c3b0c4;
  --color-amethyst-dark-violet-400: #ab96ae;
  --color-amethyst-dark-violet-500: #947d98;
  --color-amethyst-dark-violet-600: #7d6a80;
  --color-amethyst-dark-violet-700: #645467;
  --color-amethyst-dark-violet-800: #493e4c;
  --color-amethyst-dark-violet-900: #332a35;
  --color-amethyst-dark-violet-950: #1f1820;
}

SCSS

$amethyst-dark-violet: #4f3c52;
$amethyst-dark-violet-rgb: 79, 60, 82;
$amethyst-dark-violet-light: mix(#fff, $amethyst-dark-violet, 20%);
$amethyst-dark-violet-dark: mix(#000, $amethyst-dark-violet, 20%);

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