Shade of Violet

CSS

:root {
  --shade-of-violet: #8601af;
  --shade-of-violet-rgb: 134 1 175;
  --shade-of-violet-oklch: oklch(0.466 0.229 314.4);
}

.element {
  color: var(--shade-of-violet);
  background-color: hsl(286 99% 35%);
  border-color: oklch(0.466 0.229 314.4);
}

Tailwind CSS v4

@theme {
  --color-shade-of-violet: #8601af;
  --color-shade-of-violet-50: #ffe1ff;
  --color-shade-of-violet-100: #ffd0ff;
  --color-shade-of-violet-200: #fbb5ff;
  --color-shade-of-violet-300: #e58eff;
  --color-shade-of-violet-400: #cf6bfa;
  --color-shade-of-violet-500: #bb3fec;
  --color-shade-of-violet-600: #9e38c7;
  --color-shade-of-violet-700: #7f2da0;
  --color-shade-of-violet-800: #5c207a;
  --color-shade-of-violet-900: #411556;
  --color-shade-of-violet-950: #29053a;
}

SCSS

$shade-of-violet: #8601af;
$shade-of-violet-rgb: 134, 1, 175;
$shade-of-violet-light: mix(#fff, $shade-of-violet, 20%);
$shade-of-violet-dark: mix(#000, $shade-of-violet, 20%);

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