Noble Plum

CSS

:root {
  --noble-plum: #871f78;
  --noble-plum-rgb: 135 31 120;
  --noble-plum-oklch: oklch(0.444 0.169 334.7);
}

.element {
  color: var(--noble-plum);
  background-color: hsl(309 63% 33%);
  border-color: oklch(0.444 0.169 334.7);
}

Tailwind CSS v4

@theme {
  --color-noble-plum: #871f78;
  --color-noble-plum-50: #ffe3ff;
  --color-noble-plum-100: #ffd3fd;
  --color-noble-plum-200: #ffb8ef;
  --color-noble-plum-300: #ee95d7;
  --color-noble-plum-400: #d974c6;
  --color-noble-plum-500: #c651b2;
  --color-noble-plum-600: #a74697;
  --color-noble-plum-700: #863879;
  --color-noble-plum-800: #63285b;
  --color-noble-plum-900: #451b40;
  --color-noble-plum-950: #2d0a29;
}

SCSS

$noble-plum: #871f78;
$noble-plum-rgb: 135, 31, 120;
$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);
}