Plum Royale

CSS

:root {
  --plum-royale: #876c7a;
  --plum-royale-rgb: 135 108 122;
  --plum-royale-oklch: oklch(0.562 0.04 345.9);
}

.element {
  color: var(--plum-royale);
  background-color: hsl(329 11% 48%);
  border-color: oklch(0.562 0.04 345.9);
}

Tailwind CSS v4

@theme {
  --color-plum-royale: #876c7a;
  --color-plum-royale-50: #fef1f7;
  --color-plum-royale-100: #f3e3ea;
  --color-plum-royale-200: #e2ced7;
  --color-plum-royale-300: #c8b0bb;
  --color-plum-royale-400: #b195a3;
  --color-plum-royale-500: #9a7c8c;
  --color-plum-royale-600: #836976;
  --color-plum-royale-700: #69545f;
  --color-plum-royale-800: #4d3d46;
  --color-plum-royale-900: #352a30;
  --color-plum-royale-950: #20181d;
}

SCSS

$plum-royale: #876c7a;
$plum-royale-rgb: 135, 108, 122;
$plum-royale-light: mix(#fff, $plum-royale, 20%);
$plum-royale-dark: mix(#000, $plum-royale, 20%);

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