Blue Magenta

CSS

:root {
  --blue-magenta: #5f34e7;
  --blue-magenta-rgb: 95 52 231;
  --blue-magenta-oklch: oklch(0.502 0.247 284.1);
}

.element {
  color: var(--blue-magenta);
  background-color: hsl(254 79% 55%);
  border-color: oklch(0.502 0.247 284.1);
}

Tailwind CSS v4

@theme {
  --color-blue-magenta: #5f34e7;
  --color-blue-magenta-50: #efebff;
  --color-blue-magenta-100: #e1dcff;
  --color-blue-magenta-200: #ccc3ff;
  --color-blue-magenta-300: #b09fff;
  --color-blue-magenta-400: #937fff;
  --color-blue-magenta-500: #7e57ff;
  --color-blue-magenta-600: #6a4bf1;
  --color-blue-magenta-700: #553cc2;
  --color-blue-magenta-800: #3b2c93;
  --color-blue-magenta-900: #281e68;
  --color-blue-magenta-950: #170c48;
}

SCSS

$blue-magenta: #5f34e7;
$blue-magenta-rgb: 95, 52, 231;
$blue-magenta-light: mix(#fff, $blue-magenta, 20%);
$blue-magenta-dark: mix(#000, $blue-magenta, 20%);

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