Blue Intrigue

CSS

:root {
  --blue-intrigue: #7f809c;
  --blue-intrigue-rgb: 127 128 156;
  --blue-intrigue-oklch: oklch(0.609 0.042 283.5);
}

.element {
  color: var(--blue-intrigue);
  background-color: hsl(238 13% 55%);
  border-color: oklch(0.609 0.042 283.5);
}

Tailwind CSS v4

@theme {
  --color-blue-intrigue: #7f809c;
  --color-blue-intrigue-50: #f4f4ff;
  --color-blue-intrigue-100: #e6e6f6;
  --color-blue-intrigue-200: #d2d2e6;
  --color-blue-intrigue-300: #b5b5cd;
  --color-blue-intrigue-400: #9b9cb7;
  --color-blue-intrigue-500: #8283a2;
  --color-blue-intrigue-600: #6e6f89;
  --color-blue-intrigue-700: #58596e;
  --color-blue-intrigue-800: #404151;
  --color-blue-intrigue-900: #2c2d38;
  --color-blue-intrigue-950: #191a23;
}

SCSS

$blue-intrigue: #7f809c;
$blue-intrigue-rgb: 127, 128, 156;
$blue-intrigue-light: mix(#fff, $blue-intrigue, 20%);
$blue-intrigue-dark: mix(#000, $blue-intrigue, 20%);

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