Plum Perfume

CSS

:root {
  --plum-perfume: #a489a3;
  --plum-perfume-rgb: 164 137 163;
  --plum-perfume-oklch: oklch(0.663 0.049 327.3);
}

.element {
  color: var(--plum-perfume);
  background-color: hsl(302 13% 59%);
  border-color: oklch(0.663 0.049 327.3);
}

Tailwind CSS v4

@theme {
  --color-plum-perfume: #a489a3;
  --color-plum-perfume-50: #fef0fc;
  --color-plum-perfume-100: #f2e2f0;
  --color-plum-perfume-200: #e1cddf;
  --color-plum-perfume-300: #c6afc4;
  --color-plum-perfume-400: #af95ae;
  --color-plum-perfume-500: #987b97;
  --color-plum-perfume-600: #816880;
  --color-plum-perfume-700: #675366;
  --color-plum-perfume-800: #4b3d4c;
  --color-plum-perfume-900: #342a35;
  --color-plum-perfume-950: #201720;
}

SCSS

$plum-perfume: #a489a3;
$plum-perfume-rgb: 164, 137, 163;
$plum-perfume-light: mix(#fff, $plum-perfume, 20%);
$plum-perfume-dark: mix(#000, $plum-perfume, 20%);

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