Charisma

CSS

:root {
  --charisma: #632a60;
  --charisma-rgb: 99 42 96;
  --charisma-oklch: oklch(0.386 0.111 329.5);
}

.element {
  color: var(--charisma);
  background-color: hsl(303 40% 28%);
  border-color: oklch(0.386 0.111 329.5);
}

Tailwind CSS v4

@theme {
  --color-charisma: #632a60;
  --color-charisma-50: #ffeaff;
  --color-charisma-100: #ffdbf9;
  --color-charisma-200: #f1c4ea;
  --color-charisma-300: #d9a3d1;
  --color-charisma-400: #c386be;
  --color-charisma-500: #ae6aa9;
  --color-charisma-600: #935a8f;
  --color-charisma-700: #764873;
  --color-charisma-800: #573456;
  --color-charisma-900: #3c233c;
  --color-charisma-950: #261226;
}

SCSS

$charisma: #632a60;
$charisma-rgb: 99, 42, 96;
$charisma-light: mix(#fff, $charisma, 20%);
$charisma-dark: mix(#000, $charisma, 20%);

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