Wild Elderberry

CSS

:root {
  --wild-elderberry: #545989;
  --wild-elderberry-rgb: 84 89 137;
  --wild-elderberry-oklch: oklch(0.481 0.077 278.5);
}

.element {
  color: var(--wild-elderberry);
  background-color: hsl(234 24% 43%);
  border-color: oklch(0.481 0.077 278.5);
}

Tailwind CSS v4

@theme {
  --color-wild-elderberry: #545989;
  --color-wild-elderberry-50: #f0f3ff;
  --color-wild-elderberry-100: #e2e6ff;
  --color-wild-elderberry-200: #cdd1f6;
  --color-wild-elderberry-300: #afb4df;
  --color-wild-elderberry-400: #949acc;
  --color-wild-elderberry-500: #7a81b9;
  --color-wild-elderberry-600: #686d9c;
  --color-wild-elderberry-700: #53577d;
  --color-wild-elderberry-800: #3b405d;
  --color-wild-elderberry-900: #292c41;
  --color-wild-elderberry-950: #17192a;
}

SCSS

$wild-elderberry: #545989;
$wild-elderberry-rgb: 84, 89, 137;
$wild-elderberry-light: mix(#fff, $wild-elderberry, 20%);
$wild-elderberry-dark: mix(#000, $wild-elderberry, 20%);

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