Fine Purple

CSS

:root {
  --fine-purple: #5e548d;
  --fine-purple-rgb: 94 84 141;
  --fine-purple-oklch: oklch(0.481 0.09 290.6);
}

.element {
  color: var(--fine-purple);
  background-color: hsl(251 25% 44%);
  border-color: oklch(0.481 0.09 290.6);
}

Tailwind CSS v4

@theme {
  --color-fine-purple: #5e548d;
  --color-fine-purple-50: #f5f1ff;
  --color-fine-purple-100: #e8e3ff;
  --color-fine-purple-200: #d5cef8;
  --color-fine-purple-300: #b8afe2;
  --color-fine-purple-400: #9e95d0;
  --color-fine-purple-500: #867bbe;
  --color-fine-purple-600: #7168a0;
  --color-fine-purple-700: #5b5381;
  --color-fine-purple-800: #413d60;
  --color-fine-purple-900: #2d2a43;
  --color-fine-purple-950: #1a172b;
}

SCSS

$fine-purple: #5e548d;
$fine-purple-rgb: 94, 84, 141;
$fine-purple-light: mix(#fff, $fine-purple, 20%);
$fine-purple-dark: mix(#000, $fine-purple, 20%);

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