Blue Indigo

CSS

:root {
  --blue-indigo: #535a7c;
  --blue-indigo-rgb: 83 90 124;
  --blue-indigo-oklch: oklch(0.475 0.056 275.1);
}

.element {
  color: var(--blue-indigo);
  background-color: hsl(230 20% 41%);
  border-color: oklch(0.475 0.056 275.1);
}

Tailwind CSS v4

@theme {
  --color-blue-indigo: #535a7c;
  --color-blue-indigo-50: #f1f4ff;
  --color-blue-indigo-100: #e3e7fb;
  --color-blue-indigo-200: #ced3ed;
  --color-blue-indigo-300: #b0b5d4;
  --color-blue-indigo-400: #949cc0;
  --color-blue-indigo-500: #7b84ac;
  --color-blue-indigo-600: #686f91;
  --color-blue-indigo-700: #535974;
  --color-blue-indigo-800: #3c4156;
  --color-blue-indigo-900: #292d3c;
  --color-blue-indigo-950: #171a26;
}

SCSS

$blue-indigo: #535a7c;
$blue-indigo-rgb: 83, 90, 124;
$blue-indigo-light: mix(#fff, $blue-indigo, 20%);
$blue-indigo-dark: mix(#000, $blue-indigo, 20%);

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