#8D1A7E

CSS

:root {
  --noble-plum: #8d1a7e;
  --noble-plum-rgb: 141 26 126;
  --noble-plum-oklch: oklch(0.453 0.182 334.3);
}

.element {
  color: var(--noble-plum);
  background-color: hsl(308 69% 33%);
  border-color: oklch(0.453 0.182 334.3);
}

Tailwind CSS v4

@theme {
  --color-noble-plum: #8d1a7e;
  --color-noble-plum-50: #ffe2ff;
  --color-noble-plum-100: #ffd1ff;
  --color-noble-plum-200: #ffb6f1;
  --color-noble-plum-300: #f191da;
  --color-noble-plum-400: #dd70ca;
  --color-noble-plum-500: #ca4bb6;
  --color-noble-plum-600: #aa419a;
  --color-noble-plum-700: #89347b;
  --color-noble-plum-800: #65255d;
  --color-noble-plum-900: #471941;
  --color-noble-plum-950: #2e082a;
}

SCSS

$noble-plum: #8d1a7e;
$noble-plum-rgb: 141, 26, 126;
$noble-plum-light: mix(#fff, $noble-plum, 20%);
$noble-plum-dark: mix(#000, $noble-plum, 20%);

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