Brescian Blue

CSS

:root {
  --brescian-blue: #0080ff;
  --brescian-blue-rgb: 0 128 255;
  --brescian-blue-oklch: oklch(0.615 0.211 256.1);
}

.element {
  color: var(--brescian-blue);
  background-color: hsl(210 100% 50%);
  border-color: oklch(0.615 0.211 256.1);
}

Tailwind CSS v4

@theme {
  --color-brescian-blue: #0080ff;
  --color-brescian-blue-50: #d0f8ff;
  --color-brescian-blue-100: #bceaff;
  --color-brescian-blue-200: #9bd6ff;
  --color-brescian-blue-300: #70b7ff;
  --color-brescian-blue-400: #3b9dff;
  --color-brescian-blue-500: #007fff;
  --color-brescian-blue-600: #006ce2;
  --color-brescian-blue-700: #0057b6;
  --color-brescian-blue-800: #004088;
  --color-brescian-blue-900: #002c60;
  --color-brescian-blue-950: #001842;
}

SCSS

$brescian-blue: #0080ff;
$brescian-blue-rgb: 0, 128, 255;
$brescian-blue-light: mix(#fff, $brescian-blue, 20%);
$brescian-blue-dark: mix(#000, $brescian-blue, 20%);

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