Crushed Velvet

CSS

:root {
  --crushed-velvet: #445397;
  --crushed-velvet-rgb: 68 83 151;
  --crushed-velvet-oklch: oklch(0.464 0.112 272);
}

.element {
  color: var(--crushed-velvet);
  background-color: hsl(229 38% 43%);
  border-color: oklch(0.464 0.112 272);
}

Tailwind CSS v4

@theme {
  --color-crushed-velvet: #445397;
  --color-crushed-velvet-50: #ebf4ff;
  --color-crushed-velvet-100: #dce6ff;
  --color-crushed-velvet-200: #c5d2ff;
  --color-crushed-velvet-300: #a5b4f1;
  --color-crushed-velvet-400: #879ae1;
  --color-crushed-velvet-500: #6d80d0;
  --color-crushed-velvet-600: #5c6daf;
  --color-crushed-velvet-700: #49578d;
  --color-crushed-velvet-800: #334069;
  --color-crushed-velvet-900: #232c4a;
  --color-crushed-velvet-950: #121931;
}

SCSS

$crushed-velvet: #445397;
$crushed-velvet-rgb: 68, 83, 151;
$crushed-velvet-light: mix(#fff, $crushed-velvet, 20%);
$crushed-velvet-dark: mix(#000, $crushed-velvet, 20%);

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