Clary

CSS

:root {
  --clary: #684976;
  --clary-rgb: 104 73 118;
  --clary-oklch: oklch(0.457 0.08 314.9);
}

.element {
  color: var(--clary);
  background-color: hsl(281 24% 37%);
  border-color: oklch(0.457 0.08 314.9);
}

Tailwind CSS v4

@theme {
  --color-clary: #684976;
  --color-clary-50: #ffefff;
  --color-clary-100: #f3e0fa;
  --color-clary-200: #e2caeb;
  --color-clary-300: #c8abd3;
  --color-clary-400: #b090bf;
  --color-clary-500: #9a76ab;
  --color-clary-600: #826490;
  --color-clary-700: #685074;
  --color-clary-800: #4c3a56;
  --color-clary-900: #35283c;
  --color-clary-950: #201626;
}

SCSS

$clary: #684976;
$clary-rgb: 104, 73, 118;
$clary-light: mix(#fff, $clary, 20%);
$clary-dark: mix(#000, $clary, 20%);

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