Blue Olympus

CSS

:root {
  --blue-olympus: #015193;
  --blue-olympus-rgb: 1 81 147;
  --blue-olympus-oklch: oklch(0.432 0.127 251.7);
}

.element {
  color: var(--blue-olympus);
  background-color: hsl(207 99% 29%);
  border-color: oklch(0.432 0.127 251.7);
}

Tailwind CSS v4

@theme {
  --color-blue-olympus: #015193;
  --color-blue-olympus-50: #ddf8ff;
  --color-blue-olympus-100: #cbebff;
  --color-blue-olympus-200: #afd8ff;
  --color-blue-olympus-300: #89bbf7;
  --color-blue-olympus-400: #63a2e7;
  --color-blue-olympus-500: #3d89d7;
  --color-blue-olympus-600: #3574b6;
  --color-blue-olympus-700: #2a5d92;
  --color-blue-olympus-800: #1a456c;
  --color-blue-olympus-900: #112f4c;
  --color-blue-olympus-950: #041c32;
}

SCSS

$blue-olympus: #015193;
$blue-olympus-rgb: 1, 81, 147;
$blue-olympus-light: mix(#fff, $blue-olympus, 20%);
$blue-olympus-dark: mix(#000, $blue-olympus, 20%);

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