Blue Mirage

CSS

:root {
  --blue-mirage: #5c6d7c;
  --blue-mirage-rgb: 92 109 124;
  --blue-mirage-oklch: oklch(0.526 0.031 245.1);
}

.element {
  color: var(--blue-mirage);
  background-color: hsl(208 15% 42%);
  border-color: oklch(0.526 0.031 245.1);
}

Tailwind CSS v4

@theme {
  --color-blue-mirage: #5c6d7c;
  --color-blue-mirage-50: #eef6fe;
  --color-blue-mirage-100: #e0e9f2;
  --color-blue-mirage-200: #cad6e1;
  --color-blue-mirage-300: #abb9c7;
  --color-blue-mirage-400: #90a1b0;
  --color-blue-mirage-500: #75899a;
  --color-blue-mirage-600: #637482;
  --color-blue-mirage-700: #4f5d68;
  --color-blue-mirage-800: #39444d;
  --color-blue-mirage-900: #272f35;
  --color-blue-mirage-950: #151b20;
}

SCSS

$blue-mirage: #5c6d7c;
$blue-mirage-rgb: 92, 109, 124;
$blue-mirage-light: mix(#fff, $blue-mirage, 20%);
$blue-mirage-dark: mix(#000, $blue-mirage, 20%);

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