UCLA Blue

CSS

:root {
  --ucla-blue: #536895;
  --ucla-blue-rgb: 83 104 149;
  --ucla-blue-oklch: oklch(0.52 0.076 264.7);
}

.element {
  color: var(--ucla-blue);
  background-color: hsl(221 28% 45%);
  border-color: oklch(0.52 0.076 264.7);
}

Tailwind CSS v4

@theme {
  --color-ucla-blue: #536895;
  --color-ucla-blue-50: #ebf5ff;
  --color-ucla-blue-100: #dce8ff;
  --color-ucla-blue-200: #c5d4f6;
  --color-ucla-blue-300: #a6b7df;
  --color-ucla-blue-400: #889ecc;
  --color-ucla-blue-500: #6d85b9;
  --color-ucla-blue-600: #5d719c;
  --color-ucla-blue-700: #4a5a7d;
  --color-ucla-blue-800: #34425d;
  --color-ucla-blue-900: #242e41;
  --color-ucla-blue-950: #121a2a;
}

SCSS

$ucla-blue: #536895;
$ucla-blue-rgb: 83, 104, 149;
$ucla-blue-light: mix(#fff, $ucla-blue, 20%);
$ucla-blue-dark: mix(#000, $ucla-blue, 20%);

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