Bright Blue Violet

CSS

:root {
  --bright-blue-violet: #8a2be2;
  --bright-blue-violet-rgb: 138 43 226;
  --bright-blue-violet-oklch: oklch(0.534 0.25 301.4);
}

.element {
  color: var(--bright-blue-violet);
  background-color: hsl(271 76% 53%);
  border-color: oklch(0.534 0.25 301.4);
}

Tailwind CSS v4

@theme {
  --color-bright-blue-violet: #8a2be2;
  --color-bright-blue-violet-50: #ffe4ff;
  --color-bright-blue-violet-100: #f9d3ff;
  --color-bright-blue-violet-200: #ebb8ff;
  --color-bright-blue-violet-300: #d392ff;
  --color-bright-blue-violet-400: #bb6eff;
  --color-bright-blue-violet-500: #a741ff;
  --color-bright-blue-violet-600: #8d39e2;
  --color-bright-blue-violet-700: #712eb6;
  --color-bright-blue-violet-800: #51218a;
  --color-bright-blue-violet-900: #391662;
  --color-bright-blue-violet-950: #230543;
}

SCSS

$bright-blue-violet: #8a2be2;
$bright-blue-violet-rgb: 138, 43, 226;
$bright-blue-violet-light: mix(#fff, $bright-blue-violet, 20%);
$bright-blue-violet-dark: mix(#000, $bright-blue-violet, 20%);

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