Noble Cause Purple

CSS

:root {
  --noble-cause-purple: #7e1e9c;
  --noble-cause-purple-rgb: 126 30 156;
  --noble-cause-purple-oklch: oklch(0.452 0.195 316.3);
}

.element {
  color: var(--noble-cause-purple);
  background-color: hsl(286 68% 36%);
  border-color: oklch(0.452 0.195 316.3);
}

Tailwind CSS v4

@theme {
  --color-noble-cause-purple: #7e1e9c;
  --color-noble-cause-purple-50: #ffe4ff;
  --color-noble-cause-purple-100: #ffd4ff;
  --color-noble-cause-purple-200: #f8b9ff;
  --color-noble-cause-purple-300: #e195f7;
  --color-noble-cause-purple-400: #cb74ea;
  --color-noble-cause-purple-500: #b750da;
  --color-noble-cause-purple-600: #9a45b8;
  --color-noble-cause-purple-700: #7c3794;
  --color-noble-cause-purple-800: #5a2770;
  --color-noble-cause-purple-900: #3f1b4f;
  --color-noble-cause-purple-950: #280a35;
}

SCSS

$noble-cause-purple: #7e1e9c;
$noble-cause-purple-rgb: 126, 30, 156;
$noble-cause-purple-light: mix(#fff, $noble-cause-purple, 20%);
$noble-cause-purple-dark: mix(#000, $noble-cause-purple, 20%);

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