Blue Leviathan

CSS

:root {
  --blue-leviathan: #032a62;
  --blue-leviathan-rgb: 3 42 98;
  --blue-leviathan-oklch: oklch(0.298 0.108 258.7);
}

.element {
  color: var(--blue-leviathan);
  background-color: hsl(215 94% 20%);
  border-color: oklch(0.298 0.108 258.7);
}

Tailwind CSS v4

@theme {
  --color-blue-leviathan: #032a62;
  --color-blue-leviathan-50: #e4f6ff;
  --color-blue-leviathan-100: #d4e9ff;
  --color-blue-leviathan-200: #bad6ff;
  --color-blue-leviathan-300: #98b8ef;
  --color-blue-leviathan-400: #77a0de;
  --color-blue-leviathan-500: #5886cd;
  --color-blue-leviathan-600: #4b72ad;
  --color-blue-leviathan-700: #3c5b8b;
  --color-blue-leviathan-800: #294367;
  --color-blue-leviathan-900: #1b2e49;
  --color-blue-leviathan-950: #0c1b30;
}

SCSS

$blue-leviathan: #032a62;
$blue-leviathan-rgb: 3, 42, 98;
$blue-leviathan-light: mix(#fff, $blue-leviathan, 20%);
$blue-leviathan-dark: mix(#000, $blue-leviathan, 20%);

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