Blue Insignia

CSS

:root {
  --blue-insignia: #566977;
  --blue-insignia-rgb: 86 105 119;
  --blue-insignia-oklch: oklch(0.51 0.032 240.2);
}

.element {
  color: var(--blue-insignia);
  background-color: hsl(205 16% 40%);
  border-color: oklch(0.51 0.032 240.2);
}

Tailwind CSS v4

@theme {
  --color-blue-insignia: #566977;
  --color-blue-insignia-50: #eef6fe;
  --color-blue-insignia-100: #dfe9f2;
  --color-blue-insignia-200: #c9d6e1;
  --color-blue-insignia-300: #aabac7;
  --color-blue-insignia-400: #8ea1b0;
  --color-blue-insignia-500: #74899a;
  --color-blue-insignia-600: #627482;
  --color-blue-insignia-700: #4e5d68;
  --color-blue-insignia-800: #38444c;
  --color-blue-insignia-900: #272f35;
  --color-blue-insignia-950: #151c20;
}

SCSS

$blue-insignia: #566977;
$blue-insignia-rgb: 86, 105, 119;
$blue-insignia-light: mix(#fff, $blue-insignia, 20%);
$blue-insignia-dark: mix(#000, $blue-insignia, 20%);

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