Catalina Blue

CSS

:root {
  --catalina-blue: #062a78;
  --catalina-blue-rgb: 6 42 120;
  --catalina-blue-oklch: oklch(0.32 0.139 262.6);
}

.element {
  color: var(--catalina-blue);
  background-color: hsl(221 90% 25%);
  border-color: oklch(0.32 0.139 262.6);
}

Tailwind CSS v4

@theme {
  --color-catalina-blue: #062a78;
  --color-catalina-blue-50: #e2f6ff;
  --color-catalina-blue-100: #d1e8ff;
  --color-catalina-blue-200: #b7d4ff;
  --color-catalina-blue-300: #94b6ff;
  --color-catalina-blue-400: #729df0;
  --color-catalina-blue-500: #5382e1;
  --color-catalina-blue-600: #466fbe;
  --color-catalina-blue-700: #385899;
  --color-catalina-blue-800: #254172;
  --color-catalina-blue-900: #192d50;
  --color-catalina-blue-950: #091a36;
}

SCSS

$catalina-blue: #062a78;
$catalina-blue-rgb: 6, 42, 120;
$catalina-blue-light: mix(#fff, $catalina-blue, 20%);
$catalina-blue-dark: mix(#000, $catalina-blue, 20%);

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