Blue Torus

CSS

:root {
  --blue-torus: #042993;
  --blue-torus-rgb: 4 41 147;
  --blue-torus-oklch: oklch(0.347 0.176 263.8);
}

.element {
  color: var(--blue-torus);
  background-color: hsl(224 95% 30%);
  border-color: oklch(0.347 0.176 263.8);
}

Tailwind CSS v4

@theme {
  --color-blue-torus: #042993;
  --color-blue-torus-50: #ddf5ff;
  --color-blue-torus-100: #cce7ff;
  --color-blue-torus-200: #b1d3ff;
  --color-blue-torus-300: #8cb4ff;
  --color-blue-torus-400: #679aff;
  --color-blue-torus-500: #477df9;
  --color-blue-torus-600: #3d6ad2;
  --color-blue-torus-700: #3055a9;
  --color-blue-torus-800: #1e3f7e;
  --color-blue-torus-900: #132b59;
  --color-blue-torus-950: #06183d;
}

SCSS

$blue-torus: #042993;
$blue-torus-rgb: 4, 41, 147;
$blue-torus-light: mix(#fff, $blue-torus, 20%);
$blue-torus-dark: mix(#000, $blue-torus, 20%);

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