#4B5066

CSS

:root {
  --heavy-violet: #4b5066;
  --heavy-violet-rgb: 75 80 102;
  --heavy-violet-oklch: oklch(0.436 0.037 274.8);
}

.element {
  color: var(--heavy-violet);
  background-color: hsl(229 15% 35%);
  border-color: oklch(0.436 0.037 274.8);
}

Tailwind CSS v4

@theme {
  --color-heavy-violet: #4b5066;
  --color-heavy-violet-50: #f2f4ff;
  --color-heavy-violet-100: #e4e7f5;
  --color-heavy-violet-200: #d0d3e4;
  --color-heavy-violet-300: #b2b6cb;
  --color-heavy-violet-400: #989db5;
  --color-heavy-violet-500: #7f859f;
  --color-heavy-violet-600: #6b7087;
  --color-heavy-violet-700: #565a6c;
  --color-heavy-violet-800: #3e424f;
  --color-heavy-violet-900: #2b2d37;
  --color-heavy-violet-950: #181a22;
}

SCSS

$heavy-violet: #4b5066;
$heavy-violet-rgb: 75, 80, 102;
$heavy-violet-light: mix(#fff, $heavy-violet, 20%);
$heavy-violet-dark: mix(#000, $heavy-violet, 20%);

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