Mid Blue

CSS

:root {
  --mid-blue: #276ab3;
  --mid-blue-rgb: 39 106 179;
  --mid-blue-oklch: oklch(0.52 0.133 253.4);
}

.element {
  color: var(--mid-blue);
  background-color: hsl(211 64% 43%);
  border-color: oklch(0.52 0.133 253.4);
}

Tailwind CSS v4

@theme {
  --color-mid-blue: #276ab3;
  --color-mid-blue-50: #dcf8ff;
  --color-mid-blue-100: #cbebff;
  --color-mid-blue-200: #aed7ff;
  --color-mid-blue-300: #89bafb;
  --color-mid-blue-400: #63a2eb;
  --color-mid-blue-500: #3d88db;
  --color-mid-blue-600: #3573b9;
  --color-mid-blue-700: #2a5c95;
  --color-mid-blue-800: #1a446f;
  --color-mid-blue-900: #112f4e;
  --color-mid-blue-950: #041b34;
}

SCSS

$mid-blue: #276ab3;
$mid-blue-rgb: 39, 106, 179;
$mid-blue-light: mix(#fff, $mid-blue, 20%);
$mid-blue-dark: mix(#000, $mid-blue, 20%);

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