#7B5EA5

CSS

:root {
  --prophet-violet: #7b5ea5;
  --prophet-violet-rgb: 123 94 165;
  --prophet-violet-oklch: oklch(0.541 0.112 301.6);
}

.element {
  color: var(--prophet-violet);
  background-color: hsl(265 28% 51%);
  border-color: oklch(0.541 0.112 301.6);
}

Tailwind CSS v4

@theme {
  --color-prophet-violet: #7b5ea5;
  --color-prophet-violet-50: #fceeff;
  --color-prophet-violet-100: #efdfff;
  --color-prophet-violet-200: #dec9fc;
  --color-prophet-violet-300: #c3aae7;
  --color-prophet-violet-400: #aa8ed6;
  --color-prophet-violet-500: #9473c4;
  --color-prophet-violet-600: #7d62a5;
  --color-prophet-violet-700: #644e85;
  --color-prophet-violet-800: #483963;
  --color-prophet-violet-900: #322746;
  --color-prophet-violet-950: #1e152d;
}

SCSS

$prophet-violet: #7b5ea5;
$prophet-violet-rgb: 123, 94, 165;
$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);
}