Wild Wisteria

CSS

:root {
  --wild-wisteria: #686b93;
  --wild-wisteria-rgb: 104 107 147;
  --wild-wisteria-oklch: oklch(0.541 0.062 280.8);
}

.element {
  color: var(--wild-wisteria);
  background-color: hsl(236 17% 49%);
  border-color: oklch(0.541 0.062 280.8);
}

Tailwind CSS v4

@theme {
  --color-wild-wisteria: #686b93;
  --color-wild-wisteria-50: #f2f3ff;
  --color-wild-wisteria-100: #e4e6fd;
  --color-wild-wisteria-200: #d0d1ef;
  --color-wild-wisteria-300: #b2b4d7;
  --color-wild-wisteria-400: #979bc3;
  --color-wild-wisteria-500: #7e82af;
  --color-wild-wisteria-600: #6b6e94;
  --color-wild-wisteria-700: #555877;
  --color-wild-wisteria-800: #3d4058;
  --color-wild-wisteria-900: #2a2c3d;
  --color-wild-wisteria-950: #181927;
}

SCSS

$wild-wisteria: #686b93;
$wild-wisteria-rgb: 104, 107, 147;
$wild-wisteria-light: mix(#fff, $wild-wisteria, 20%);
$wild-wisteria-dark: mix(#000, $wild-wisteria, 20%);

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