Lucid Blue

CSS

:root {
  --lucid-blue: #7e8d9f;
  --lucid-blue-rgb: 126 141 159;
  --lucid-blue-oklch: oklch(0.638 0.032 253.1);
}

.element {
  color: var(--lucid-blue);
  background-color: hsl(213 15% 56%);
  border-color: oklch(0.638 0.032 253.1);
}

Tailwind CSS v4

@theme {
  --color-lucid-blue: #7e8d9f;
  --color-lucid-blue-50: #eff6ff;
  --color-lucid-blue-100: #e1e9f3;
  --color-lucid-blue-200: #cbd5e2;
  --color-lucid-blue-300: #adb9c8;
  --color-lucid-blue-400: #91a0b2;
  --color-lucid-blue-500: #77889c;
  --color-lucid-blue-600: #657383;
  --color-lucid-blue-700: #515c69;
  --color-lucid-blue-800: #3a434d;
  --color-lucid-blue-900: #282f36;
  --color-lucid-blue-950: #161b21;
}

SCSS

$lucid-blue: #7e8d9f;
$lucid-blue-rgb: 126, 141, 159;
$lucid-blue-light: mix(#fff, $lucid-blue, 20%);
$lucid-blue-dark: mix(#000, $lucid-blue, 20%);

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