Medium Purple

CSS

:root {
  --medium-purple: #9e43a2;
  --medium-purple-rgb: 158 67 162;
  --medium-purple-oklch: oklch(0.539 0.169 325.9);
}

.element {
  color: var(--medium-purple);
  background-color: hsl(297 41% 45%);
  border-color: oklch(0.539 0.169 325.9);
}

Tailwind CSS v4

@theme {
  --color-medium-purple: #9e43a2;
  --color-medium-purple-50: #ffe5ff;
  --color-medium-purple-100: #ffd4ff;
  --color-medium-purple-200: #fcbbf9;
  --color-medium-purple-300: #e697e3;
  --color-medium-purple-400: #d077d3;
  --color-medium-purple-500: #bd56c1;
  --color-medium-purple-600: #9f49a3;
  --color-medium-purple-700: #803b83;
  --color-medium-purple-800: #5e2a63;
  --color-medium-purple-900: #421c45;
  --color-medium-purple-950: #2a0c2d;
}

SCSS

$medium-purple: #9e43a2;
$medium-purple-rgb: 158, 67, 162;
$medium-purple-light: mix(#fff, $medium-purple, 20%);
$medium-purple-dark: mix(#000, $medium-purple, 20%);

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