#7C5EA6

CSS

:root {
  --prophet-violet: #7c5ea6;
  --prophet-violet-rgb: 124 94 166;
  --prophet-violet-oklch: oklch(0.543 0.113 302);
}

.element {
  color: var(--prophet-violet);
  background-color: hsl(265 29% 51%);
  border-color: oklch(0.543 0.113 302);
}

Tailwind CSS v4

@theme {
  --color-prophet-violet: #7c5ea6;
  --color-prophet-violet-50: #fceeff;
  --color-prophet-violet-100: #f0dfff;
  --color-prophet-violet-200: #dec9fc;
  --color-prophet-violet-300: #c4a9e7;
  --color-prophet-violet-400: #ab8ed6;
  --color-prophet-violet-500: #9472c4;
  --color-prophet-violet-600: #7d61a6;
  --color-prophet-violet-700: #644e85;
  --color-prophet-violet-800: #493964;
  --color-prophet-violet-900: #322746;
  --color-prophet-violet-950: #1e152d;
}

SCSS

$prophet-violet: #7c5ea6;
$prophet-violet-rgb: 124, 94, 166;
$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);
}