Harvest Night

CSS

:root {
  --harvest-night: #554488;
  --harvest-night-rgb: 85 68 136;
  --harvest-night-oklch: oklch(0.438 0.109 292.8);
}

.element {
  color: var(--harvest-night);
  background-color: hsl(255 33% 40%);
  border-color: oklch(0.438 0.109 292.8);
}

Tailwind CSS v4

@theme {
  --color-harvest-night: #554488;
  --color-harvest-night-50: #f7f0ff;
  --color-harvest-night-100: #eae1ff;
  --color-harvest-night-200: #d7ccff;
  --color-harvest-night-300: #bbadea;
  --color-harvest-night-400: #a192d9;
  --color-harvest-night-500: #8977c8;
  --color-harvest-night-600: #7465a9;
  --color-harvest-night-700: #5d5187;
  --color-harvest-night-800: #433b65;
  --color-harvest-night-900: #2e2947;
  --color-harvest-night-950: #1b162e;
}

SCSS

$harvest-night: #554488;
$harvest-night-rgb: 85, 68, 136;
$harvest-night-light: mix(#fff, $harvest-night, 20%);
$harvest-night-dark: mix(#000, $harvest-night, 20%);

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