Blue Syzygy

CSS

:root {
  --blue-syzygy: #1b4556;
  --blue-syzygy-rgb: 27 69 86;
  --blue-syzygy-oklch: oklch(0.369 0.055 227.7);
}

.element {
  color: var(--blue-syzygy);
  background-color: hsl(197 52% 22%);
  border-color: oklch(0.369 0.055 227.7);
}

Tailwind CSS v4

@theme {
  --color-blue-syzygy: #1b4556;
  --color-blue-syzygy-50: #e6f9ff;
  --color-blue-syzygy-100: #d6ecf7;
  --color-blue-syzygy-200: #bdd9e7;
  --color-blue-syzygy-300: #9bbdce;
  --color-blue-syzygy-400: #7da5b8;
  --color-blue-syzygy-500: #5f8ea3;
  --color-blue-syzygy-600: #50788a;
  --color-blue-syzygy-700: #40606e;
  --color-blue-syzygy-800: #2d4751;
  --color-blue-syzygy-900: #1f3138;
  --color-blue-syzygy-950: #0e1d23;
}

SCSS

$blue-syzygy: #1b4556;
$blue-syzygy-rgb: 27, 69, 86;
$blue-syzygy-light: mix(#fff, $blue-syzygy, 20%);
$blue-syzygy-dark: mix(#000, $blue-syzygy, 20%);

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