Blue Violet

CSS

:root {
  --blue-violet: #4e32b2;
  --blue-violet-rgb: 78 50 178;
  --blue-violet-oklch: oklch(0.434 0.19 285.4);
}

.element {
  color: var(--blue-violet);
  background-color: hsl(253 56% 45%);
  border-color: oklch(0.434 0.19 285.4);
}

Tailwind CSS v4

@theme {
  --color-blue-violet: #4e32b2;
  --color-blue-violet-50: #f1eeff;
  --color-blue-violet-100: #e3dfff;
  --color-blue-violet-200: #cfc8ff;
  --color-blue-violet-300: #b2a6ff;
  --color-blue-violet-400: #9689ff;
  --color-blue-violet-500: #7f69fc;
  --color-blue-violet-600: #6c5ad4;
  --color-blue-violet-700: #5648ab;
  --color-blue-violet-800: #3c3581;
  --color-blue-violet-900: #29245b;
  --color-blue-violet-950: #18123e;
}

SCSS

$blue-violet: #4e32b2;
$blue-violet-rgb: 78, 50, 178;
$blue-violet-light: mix(#fff, $blue-violet, 20%);
$blue-violet-dark: mix(#000, $blue-violet, 20%);

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