Spanish Violet

CSS

:root {
  --spanish-violet: #4c2882;
  --spanish-violet-rgb: 76 40 130;
  --spanish-violet-oklch: oklch(0.376 0.143 297.4);
}

.element {
  color: var(--spanish-violet);
  background-color: hsl(264 53% 33%);
  border-color: oklch(0.376 0.143 297.4);
}

Tailwind CSS v4

@theme {
  --color-spanish-violet: #4c2882;
  --color-spanish-violet-50: #fbedff;
  --color-spanish-violet-100: #eedeff;
  --color-spanish-violet-200: #ddc7ff;
  --color-spanish-violet-300: #c2a7f6;
  --color-spanish-violet-400: #a88be8;
  --color-spanish-violet-500: #926ed8;
  --color-spanish-violet-600: #7b5db6;
  --color-spanish-violet-700: #634a92;
  --color-spanish-violet-800: #47366e;
  --color-spanish-violet-900: #31254d;
  --color-spanish-violet-950: #1d1333;
}

SCSS

$spanish-violet: #4c2882;
$spanish-violet-rgb: 76, 40, 130;
$spanish-violet-light: mix(#fff, $spanish-violet, 20%);
$spanish-violet-dark: mix(#000, $spanish-violet, 20%);

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