Brandeis Blue

CSS

:root {
  --brandeis-blue: #0070ff;
  --brandeis-blue-rgb: 0 112 255;
  --brandeis-blue-oklch: oklch(0.583 0.229 259.3);
}

.element {
  color: var(--brandeis-blue);
  background-color: hsl(214 100% 50%);
  border-color: oklch(0.583 0.229 259.3);
}

Tailwind CSS v4

@theme {
  --color-brandeis-blue: #0070ff;
  --color-brandeis-blue-50: #d1f6ff;
  --color-brandeis-blue-100: #bde9ff;
  --color-brandeis-blue-200: #9cd4ff;
  --color-brandeis-blue-300: #72b4ff;
  --color-brandeis-blue-400: #4098ff;
  --color-brandeis-blue-500: #0079ff;
  --color-brandeis-blue-600: #0067ed;
  --color-brandeis-blue-700: #0253bf;
  --color-brandeis-blue-800: #003d8f;
  --color-brandeis-blue-900: #002a65;
  --color-brandeis-blue-950: #001646;
}

SCSS

$brandeis-blue: #0070ff;
$brandeis-blue-rgb: 0, 112, 255;
$brandeis-blue-light: mix(#fff, $brandeis-blue, 20%);
$brandeis-blue-dark: mix(#000, $brandeis-blue, 20%);

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