Blue Odyssey

CSS

:root {
  --blue-odyssey: #4f6997;
  --blue-odyssey-rgb: 79 105 151;
  --blue-odyssey-oklch: oklch(0.52 0.08 261.4);
}

.element {
  color: var(--blue-odyssey);
  background-color: hsl(218 31% 45%);
  border-color: oklch(0.52 0.08 261.4);
}

Tailwind CSS v4

@theme {
  --color-blue-odyssey: #4f6997;
  --color-blue-odyssey-50: #e9f6ff;
  --color-blue-odyssey-100: #dae8ff;
  --color-blue-odyssey-200: #c3d5f7;
  --color-blue-odyssey-300: #a2b8e1;
  --color-blue-odyssey-400: #849fce;
  --color-blue-odyssey-500: #6886bb;
  --color-blue-odyssey-600: #59729e;
  --color-blue-odyssey-700: #475b7f;
  --color-blue-odyssey-800: #32435e;
  --color-blue-odyssey-900: #222e42;
  --color-blue-odyssey-950: #111b2a;
}

SCSS

$blue-odyssey: #4f6997;
$blue-odyssey-rgb: 79, 105, 151;
$blue-odyssey-light: mix(#fff, $blue-odyssey, 20%);
$blue-odyssey-dark: mix(#000, $blue-odyssey, 20%);

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