Dark Lavender

CSS

:root {
  --dark-lavender: #856798;
  --dark-lavender-rgb: 133 103 152;
  --dark-lavender-oklch: oklch(0.562 0.081 311.8);
}

.element {
  color: var(--dark-lavender);
  background-color: hsl(277 19% 50%);
  border-color: oklch(0.562 0.081 311.8);
}

Tailwind CSS v4

@theme {
  --color-dark-lavender: #856798;
  --color-dark-lavender-50: #feefff;
  --color-dark-lavender-100: #f2e0fc;
  --color-dark-lavender-200: #e1cbed;
  --color-dark-lavender-300: #c7acd5;
  --color-dark-lavender-400: #af91c2;
  --color-dark-lavender-500: #9876ae;
  --color-dark-lavender-600: #816493;
  --color-dark-lavender-700: #675076;
  --color-dark-lavender-800: #4b3a58;
  --color-dark-lavender-900: #34283d;
  --color-dark-lavender-950: #1f1627;
}

SCSS

$dark-lavender: #856798;
$dark-lavender-rgb: 133, 103, 152;
$dark-lavender-light: mix(#fff, $dark-lavender, 20%);
$dark-lavender-dark: mix(#000, $dark-lavender, 20%);

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