Fashionably Plum

CSS

:root {
  --fashionably-plum: #b28ca9;
  --fashionably-plum-rgb: 178 140 169;
  --fashionably-plum-oklch: oklch(0.685 0.061 334.8);
}

.element {
  color: var(--fashionably-plum);
  background-color: hsl(314 20% 62%);
  border-color: oklch(0.685 0.061 334.8);
}

Tailwind CSS v4

@theme {
  --color-fashionably-plum: #b28ca9;
  --color-fashionably-plum-50: #ffeffc;
  --color-fashionably-plum-100: #f6e1ef;
  --color-fashionably-plum-200: #e6cbde;
  --color-fashionably-plum-300: #cdacc3;
  --color-fashionably-plum-400: #b691ad;
  --color-fashionably-plum-500: #a07796;
  --color-fashionably-plum-600: #87657f;
  --color-fashionably-plum-700: #6c5166;
  --color-fashionably-plum-800: #4f3b4c;
  --color-fashionably-plum-900: #372834;
  --color-fashionably-plum-950: #221620;
}

SCSS

$fashionably-plum: #b28ca9;
$fashionably-plum-rgb: 178, 140, 169;
$fashionably-plum-light: mix(#fff, $fashionably-plum, 20%);
$fashionably-plum-dark: mix(#000, $fashionably-plum, 20%);

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