Venetian Nights

CSS

:root {
  --venetian-nights: #7755ff;
  --venetian-nights-rgb: 119 85 255;
  --venetian-nights-oklch: oklch(0.585 0.238 285.5);
}

.element {
  color: var(--venetian-nights);
  background-color: hsl(252 100% 67%);
  border-color: oklch(0.585 0.238 285.5);
}

Tailwind CSS v4

@theme {
  --color-venetian-nights: #7755ff;
  --color-venetian-nights-50: #f0ebff;
  --color-venetian-nights-100: #e3dcff;
  --color-venetian-nights-200: #cfc3ff;
  --color-venetian-nights-300: #b39fff;
  --color-venetian-nights-400: #977fff;
  --color-venetian-nights-500: #8159ff;
  --color-venetian-nights-600: #6d4dec;
  --color-venetian-nights-700: #573ebe;
  --color-venetian-nights-800: #3d2d90;
  --color-venetian-nights-900: #2a1f66;
  --color-venetian-nights-950: #180c47;
}

SCSS

$venetian-nights: #7755ff;
$venetian-nights-rgb: 119, 85, 255;
$venetian-nights-light: mix(#fff, $venetian-nights, 20%);
$venetian-nights-dark: mix(#000, $venetian-nights, 20%);

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