Plum Fuzz

CSS

:root {
  --plum-fuzz: #313048;
  --plum-fuzz-rgb: 49 48 72;
  --plum-fuzz-oklch: oklch(0.321 0.042 285.7);
}

.element {
  color: var(--plum-fuzz);
  background-color: hsl(243 20% 24%);
  border-color: oklch(0.321 0.042 285.7);
}

Tailwind CSS v4

@theme {
  --color-plum-fuzz: #313048;
  --color-plum-fuzz-50: #f4f4ff;
  --color-plum-fuzz-100: #e7e6f6;
  --color-plum-fuzz-200: #d3d2e6;
  --color-plum-fuzz-300: #b6b4cd;
  --color-plum-fuzz-400: #9c9bb7;
  --color-plum-fuzz-500: #8383a2;
  --color-plum-fuzz-600: #6f6f89;
  --color-plum-fuzz-700: #59586d;
  --color-plum-fuzz-800: #404151;
  --color-plum-fuzz-900: #2c2d38;
  --color-plum-fuzz-950: #191a23;
}

SCSS

$plum-fuzz: #313048;
$plum-fuzz-rgb: 49, 48, 72;
$plum-fuzz-light: mix(#fff, $plum-fuzz, 20%);
$plum-fuzz-dark: mix(#000, $plum-fuzz, 20%);

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