Heavy Violet

CSS

:root {
  --heavy-violet: #4f566c;
  --heavy-violet-rgb: 79 86 108;
  --heavy-violet-oklch: oklch(0.456 0.037 271.1);
}

.element {
  color: var(--heavy-violet);
  background-color: hsl(226 16% 37%);
  border-color: oklch(0.456 0.037 271.1);
}

Tailwind CSS v4

@theme {
  --color-heavy-violet: #4f566c;
  --color-heavy-violet-50: #f1f5ff;
  --color-heavy-violet-100: #e3e7f5;
  --color-heavy-violet-200: #cfd4e5;
  --color-heavy-violet-300: #b1b7cb;
  --color-heavy-violet-400: #969eb5;
  --color-heavy-violet-500: #7d859f;
  --color-heavy-violet-600: #6a7187;
  --color-heavy-violet-700: #545a6c;
  --color-heavy-violet-800: #3d4250;
  --color-heavy-violet-900: #2a2e37;
  --color-heavy-violet-950: #181a22;
}

SCSS

$heavy-violet: #4f566c;
$heavy-violet-rgb: 79, 86, 108;
$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);
}