Liberal Lilac

CSS

:root {
  --liberal-lilac: #9955bb;
  --liberal-lilac-rgb: 153 85 187;
  --liberal-lilac-oklch: oklch(0.572 0.164 313.1);
}

.element {
  color: var(--liberal-lilac);
  background-color: hsl(280 43% 53%);
  border-color: oklch(0.572 0.164 313.1);
}

Tailwind CSS v4

@theme {
  --color-liberal-lilac: #9955bb;
  --color-liberal-lilac-50: #ffe8ff;
  --color-liberal-lilac-100: #fdd8ff;
  --color-liberal-lilac-200: #efbfff;
  --color-liberal-lilac-300: #d79df1;
  --color-liberal-lilac-400: #c07fe2;
  --color-liberal-lilac-500: #ab5fd1;
  --color-liberal-lilac-600: #9151b1;
  --color-liberal-lilac-700: #74418e;
  --color-liberal-lilac-800: #542f6b;
  --color-liberal-lilac-900: #3b204b;
  --color-liberal-lilac-950: #250f32;
}

SCSS

$liberal-lilac: #9955bb;
$liberal-lilac-rgb: 153, 85, 187;
$liberal-lilac-light: mix(#fff, $liberal-lilac, 20%);
$liberal-lilac-dark: mix(#000, $liberal-lilac, 20%);

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