Wild Violet

CSS

:root {
  --wild-violet: #63209b;
  --wild-violet-rgb: 99 32 155;
  --wild-violet-oklch: oklch(0.416 0.185 303.8);
}

.element {
  color: var(--wild-violet);
  background-color: hsl(273 66% 37%);
  border-color: oklch(0.416 0.185 303.8);
}

Tailwind CSS v4

@theme {
  --color-wild-violet: #63209b;
  --color-wild-violet-50: #ffe8ff;
  --color-wild-violet-100: #f7d9ff;
  --color-wild-violet-200: #e7c0ff;
  --color-wild-violet-300: #cf9dff;
  --color-wild-violet-400: #b67ef6;
  --color-wild-violet-500: #a15de7;
  --color-wild-violet-600: #8850c3;
  --color-wild-violet-700: #6d409d;
  --color-wild-violet-800: #4f2e76;
  --color-wild-violet-900: #371f54;
  --color-wild-violet-950: #220e38;
}

SCSS

$wild-violet: #63209b;
$wild-violet-rgb: 99, 32, 155;
$wild-violet-light: mix(#fff, $wild-violet, 20%);
$wild-violet-dark: mix(#000, $wild-violet, 20%);

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