American Violet

CSS

:root {
  --american-violet: #551b8c;
  --american-violet-rgb: 85 27 140;
  --american-violet-oklch: oklch(0.38 0.172 301.7);
}

.element {
  color: var(--american-violet);
  background-color: hsl(271 68% 33%);
  border-color: oklch(0.38 0.172 301.7);
}

Tailwind CSS v4

@theme {
  --color-american-violet: #551b8c;
  --color-american-violet-50: #ffeaff;
  --color-american-violet-100: #f4daff;
  --color-american-violet-200: #e4c2ff;
  --color-american-violet-300: #caa0ff;
  --color-american-violet-400: #b183f2;
  --color-american-violet-500: #9c63e3;
  --color-american-violet-600: #8455bf;
  --color-american-violet-700: #6a439a;
  --color-american-violet-800: #4c3174;
  --color-american-violet-900: #352152;
  --color-american-violet-950: #201037;
}

SCSS

$american-violet: #551b8c;
$american-violet-rgb: 85, 27, 140;
$american-violet-light: mix(#fff, $american-violet, 20%);
$american-violet-dark: mix(#000, $american-violet, 20%);

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