Plum Power

CSS

:root {
  --plum-power: #7e5e8d;
  --plum-power-rgb: 126 94 141;
  --plum-power-oklch: oklch(0.532 0.081 314.7);
}

.element {
  color: var(--plum-power);
  background-color: hsl(281 20% 46%);
  border-color: oklch(0.532 0.081 314.7);
}

Tailwind CSS v4

@theme {
  --color-plum-power: #7e5e8d;
  --color-plum-power-50: #ffeeff;
  --color-plum-power-100: #f3e0fa;
  --color-plum-power-200: #e2caec;
  --color-plum-power-300: #c8abd3;
  --color-plum-power-400: #b090c0;
  --color-plum-power-500: #9a76ab;
  --color-plum-power-600: #826491;
  --color-plum-power-700: #685074;
  --color-plum-power-800: #4c3a57;
  --color-plum-power-900: #35283c;
  --color-plum-power-950: #201626;
}

SCSS

$plum-power: #7e5e8d;
$plum-power-rgb: 126, 94, 141;
$plum-power-light: mix(#fff, $plum-power, 20%);
$plum-power-dark: mix(#000, $plum-power, 20%);

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