True V

CSS

:root {
  --true-v: #8e72c7;
  --true-v-rgb: 142 114 199;
  --true-v-oklch: oklch(0.615 0.128 297.7);
}

.element {
  color: var(--true-v);
  background-color: hsl(260 43% 61%);
  border-color: oklch(0.615 0.128 297.7);
}

Tailwind CSS v4

@theme {
  --color-true-v: #8e72c7;
  --color-true-v-50: #faeeff;
  --color-true-v-100: #eedfff;
  --color-true-v-200: #dcc9ff;
  --color-true-v-300: #c1a9f0;
  --color-true-v-400: #a78de0;
  --color-true-v-500: #9171cf;
  --color-true-v-600: #7a60af;
  --color-true-v-700: #624d8c;
  --color-true-v-800: #463869;
  --color-true-v-900: #31264a;
  --color-true-v-950: #1d1431;
}

SCSS

$true-v: #8e72c7;
$true-v-rgb: 142, 114, 199;
$true-v-light: mix(#fff, $true-v, 20%);
$true-v-dark: mix(#000, $true-v, 20%);

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