#7C5DAB

CSS

:root {
  --prophet-violet: #7c5dab;
  --prophet-violet-rgb: 124 93 171;
  --prophet-violet-oklch: oklch(0.544 0.122 300.8);
}

.element {
  color: var(--prophet-violet);
  background-color: hsl(264 32% 52%);
  border-color: oklch(0.544 0.122 300.8);
}

Tailwind CSS v4

@theme {
  --color-prophet-violet: #7c5dab;
  --color-prophet-violet-50: #fcedff;
  --color-prophet-violet-100: #f0dfff;
  --color-prophet-violet-200: #dec8ff;
  --color-prophet-violet-300: #c4a8eb;
  --color-prophet-violet-400: #aa8ddb;
  --color-prophet-violet-500: #9471ca;
  --color-prophet-violet-600: #7d60aa;
  --color-prophet-violet-700: #644d89;
  --color-prophet-violet-800: #483866;
  --color-prophet-violet-900: #322648;
  --color-prophet-violet-950: #1e142f;
}

SCSS

$prophet-violet: #7c5dab;
$prophet-violet-rgb: 124, 93, 171;
$prophet-violet-light: mix(#fff, $prophet-violet, 20%);
$prophet-violet-dark: mix(#000, $prophet-violet, 20%);

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