Dark Magenta

CSS

:root {
  --dark-magenta: #8b008b;
  --dark-magenta-rgb: 139 0 139;
  --dark-magenta-oklch: oklch(0.447 0.205 328.4);
}

.element {
  color: var(--dark-magenta);
  background-color: hsl(300 100% 27%);
  border-color: oklch(0.447 0.205 328.4);
}

Tailwind CSS v4

@theme {
  --color-dark-magenta: #8b008b;
  --color-dark-magenta-50: #ffe0ff;
  --color-dark-magenta-100: #ffcfff;
  --color-dark-magenta-200: #ffb3fe;
  --color-dark-magenta-300: #f18ee8;
  --color-dark-magenta-400: #dd6ada;
  --color-dark-magenta-500: #ca42c8;
  --color-dark-magenta-600: #aa3aa9;
  --color-dark-magenta-700: #892e88;
  --color-dark-magenta-800: #642067;
  --color-dark-magenta-900: #471648;
  --color-dark-magenta-950: #2e062f;
}

SCSS

$dark-magenta: #8b008b;
$dark-magenta-rgb: 139, 0, 139;
$dark-magenta-light: mix(#fff, $dark-magenta, 20%);
$dark-magenta-dark: mix(#000, $dark-magenta, 20%);

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