Shades of Rhodonite

CSS

:root {
  --shades-of-rhodonite: #be2bdf;
  --shades-of-rhodonite-rgb: 190 43 223;
  --shades-of-rhodonite-oklch: oklch(0.599 0.261 319.1);
}

.element {
  color: var(--shades-of-rhodonite);
  background-color: hsl(289 74% 52%);
  border-color: oklch(0.599 0.261 319.1);
}

Tailwind CSS v4

@theme {
  --color-shades-of-rhodonite: #be2bdf;
  --color-shades-of-rhodonite-50: #ffddff;
  --color-shades-of-rhodonite-100: #ffcbff;
  --color-shades-of-rhodonite-200: #ffadff;
  --color-shades-of-rhodonite-300: #f283ff;
  --color-shades-of-rhodonite-400: #dd5bfd;
  --color-shades-of-rhodonite-500: #ca1bef;
  --color-shades-of-rhodonite-600: #ab1dca;
  --color-shades-of-rhodonite-700: #8919a2;
  --color-shades-of-rhodonite-800: #64117c;
  --color-shades-of-rhodonite-900: #470b57;
  --color-shades-of-rhodonite-950: #2e003b;
}

SCSS

$shades-of-rhodonite: #be2bdf;
$shades-of-rhodonite-rgb: 190, 43, 223;
$shades-of-rhodonite-light: mix(#fff, $shades-of-rhodonite, 20%);
$shades-of-rhodonite-dark: mix(#000, $shades-of-rhodonite, 20%);

.element {
  color: $shades-of-rhodonite;
  box-shadow: 0 0 0 2px rgba($shades-of-rhodonite, 0.35);
}