Parma Plum Red

CSS

:root {
  --parma-plum-red: #5e3958;
  --parma-plum-red-rgb: 94 57 88;
  --parma-plum-red-oklch: oklch(0.4 0.07 332.8);
}

.element {
  color: var(--parma-plum-red);
  background-color: hsl(310 25% 30%);
  border-color: oklch(0.4 0.07 332.8);
}

Tailwind CSS v4

@theme {
  --color-parma-plum-red: #5e3958;
  --color-parma-plum-red-50: #ffeefd;
  --color-parma-plum-red-100: #f7e0f1;
  --color-parma-plum-red-200: #e8cae0;
  --color-parma-plum-red-300: #cfaac6;
  --color-parma-plum-red-400: #b88fb0;
  --color-parma-plum-red-500: #a2759a;
  --color-parma-plum-red-600: #896382;
  --color-parma-plum-red-700: #6e4f68;
  --color-parma-plum-red-800: #513a4e;
  --color-parma-plum-red-900: #382736;
  --color-parma-plum-red-950: #231521;
}

SCSS

$parma-plum-red: #5e3958;
$parma-plum-red-rgb: 94, 57, 88;
$parma-plum-red-light: mix(#fff, $parma-plum-red, 20%);
$parma-plum-red-dark: mix(#000, $parma-plum-red, 20%);

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