Blue Highlight

CSS

:root {
  --blue-highlight: #324a8b;
  --blue-highlight-rgb: 50 74 139;
  --blue-highlight-oklch: oklch(0.425 0.112 266.5);
}

.element {
  color: var(--blue-highlight);
  background-color: hsl(224 47% 37%);
  border-color: oklch(0.425 0.112 266.5);
}

Tailwind CSS v4

@theme {
  --color-blue-highlight: #324a8b;
  --color-blue-highlight-50: #e8f5ff;
  --color-blue-highlight-100: #d8e7ff;
  --color-blue-highlight-200: #c0d3ff;
  --color-blue-highlight-300: #9fb6f1;
  --color-blue-highlight-400: #809ce1;
  --color-blue-highlight-500: #6483d0;
  --color-blue-highlight-600: #556fb0;
  --color-blue-highlight-700: #44598d;
  --color-blue-highlight-800: #2f4169;
  --color-blue-highlight-900: #202d4a;
  --color-blue-highlight-950: #0f1a31;
}

SCSS

$blue-highlight: #324a8b;
$blue-highlight-rgb: 50, 74, 139;
$blue-highlight-light: mix(#fff, $blue-highlight, 20%);
$blue-highlight-dark: mix(#000, $blue-highlight, 20%);

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