New Riders of the Purple Sage

CSS

:root {
  --new-riders-of-the-purple-sage: #691d6c;
  --new-riders-of-the-purple-sage-rgb: 105 29 108;
  --new-riders-of-the-purple-sage-oklch: oklch(0.387 0.145 326.3);
}

.element {
  color: var(--new-riders-of-the-purple-sage);
  background-color: hsl(298 58% 27%);
  border-color: oklch(0.387 0.145 326.3);
}

Tailwind CSS v4

@theme {
  --color-new-riders-of-the-purple-sage: #691d6c;
  --color-new-riders-of-the-purple-sage-50: #ffe7ff;
  --color-new-riders-of-the-purple-sage-100: #ffd7ff;
  --color-new-riders-of-the-purple-sage-200: #f7bef4;
  --color-new-riders-of-the-purple-sage-300: #e09cdd;
  --color-new-riders-of-the-purple-sage-400: #ca7ecc;
  --color-new-riders-of-the-purple-sage-500: #b65fb8;
  --color-new-riders-of-the-purple-sage-600: #9a519c;
  --color-new-riders-of-the-purple-sage-700: #7b417d;
  --color-new-riders-of-the-purple-sage-800: #5a2f5e;
  --color-new-riders-of-the-purple-sage-900: #3f2042;
  --color-new-riders-of-the-purple-sage-950: #280f2a;
}

SCSS

$new-riders-of-the-purple-sage: #691d6c;
$new-riders-of-the-purple-sage-rgb: 105, 29, 108;
$new-riders-of-the-purple-sage-light: mix(#fff, $new-riders-of-the-purple-sage, 20%);
$new-riders-of-the-purple-sage-dark: mix(#000, $new-riders-of-the-purple-sage, 20%);

.element {
  color: $new-riders-of-the-purple-sage;
  box-shadow: 0 0 0 2px rgba($new-riders-of-the-purple-sage, 0.35);
}