Blue Zephyr

CSS

:root {
  --blue-zephyr: #5b6676;
  --blue-zephyr-rgb: 91 102 118;
  --blue-zephyr-oklch: oklch(0.507 0.029 257.7);
}

.element {
  color: var(--blue-zephyr);
  background-color: hsl(216 13% 41%);
  border-color: oklch(0.507 0.029 257.7);
}

Tailwind CSS v4

@theme {
  --color-blue-zephyr: #5b6676;
  --color-blue-zephyr-50: #f0f5fe;
  --color-blue-zephyr-100: #e2e8f2;
  --color-blue-zephyr-200: #cdd5e1;
  --color-blue-zephyr-300: #afb8c7;
  --color-blue-zephyr-400: #949fb0;
  --color-blue-zephyr-500: #7a879a;
  --color-blue-zephyr-600: #687282;
  --color-blue-zephyr-700: #535b68;
  --color-blue-zephyr-800: #3c434c;
  --color-blue-zephyr-900: #292e35;
  --color-blue-zephyr-950: #171b20;
}

SCSS

$blue-zephyr: #5b6676;
$blue-zephyr-rgb: 91, 102, 118;
$blue-zephyr-light: mix(#fff, $blue-zephyr, 20%);
$blue-zephyr-dark: mix(#000, $blue-zephyr, 20%);

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