Navigator

CSS

:root {
  --navigator: #5d83ab;
  --navigator-rgb: 93 131 171;
  --navigator-oklch: oklch(0.598 0.075 250.4);
}

.element {
  color: var(--navigator);
  background-color: hsl(211 32% 52%);
  border-color: oklch(0.598 0.075 250.4);
}

Tailwind CSS v4

@theme {
  --color-navigator: #5d83ab;
  --color-navigator-50: #e6f7ff;
  --color-navigator-100: #d7eaff;
  --color-navigator-200: #bed7f4;
  --color-navigator-300: #9cbadd;
  --color-navigator-400: #7da2ca;
  --color-navigator-500: #5f8ab6;
  --color-navigator-600: #51759a;
  --color-navigator-700: #415d7b;
  --color-navigator-800: #2d455b;
  --color-navigator-900: #1f2f40;
  --color-navigator-950: #0e1c29;
}

SCSS

$navigator: #5d83ab;
$navigator-rgb: 93, 131, 171;
$navigator-light: mix(#fff, $navigator, 20%);
$navigator-dark: mix(#000, $navigator, 20%);

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