Purple Vision

CSS

:root {
  --purple-vision: #a29cc8;
  --purple-vision-rgb: 162 156 200;
  --purple-vision-oklch: oklch(0.713 0.064 290.9);
}

.element {
  color: var(--purple-vision);
  background-color: hsl(248 29% 70%);
  border-color: oklch(0.713 0.064 290.9);
}

Tailwind CSS v4

@theme {
  --color-purple-vision: #a29cc8;
  --color-purple-vision-50: #f5f2ff;
  --color-purple-vision-100: #e8e4fc;
  --color-purple-vision-200: #d5d0ee;
  --color-purple-vision-300: #b8b2d6;
  --color-purple-vision-400: #9e98c2;
  --color-purple-vision-500: #867fae;
  --color-purple-vision-600: #716c93;
  --color-purple-vision-700: #5b5676;
  --color-purple-vision-800: #413f57;
  --color-purple-vision-900: #2d2b3d;
  --color-purple-vision-950: #1a1926;
}

SCSS

$purple-vision: #a29cc8;
$purple-vision-rgb: 162, 156, 200;
$purple-vision-light: mix(#fff, $purple-vision, 20%);
$purple-vision-dark: mix(#000, $purple-vision, 20%);

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