Nightshadow Blue

CSS

:root {
  --nightshadow-blue: #555971;
  --nightshadow-blue-rgb: 85 89 113;
  --nightshadow-blue-oklch: oklch(0.47 0.039 277.4);
}

.element {
  color: var(--nightshadow-blue);
  background-color: hsl(231 14% 39%);
  border-color: oklch(0.47 0.039 277.4);
}

Tailwind CSS v4

@theme {
  --color-nightshadow-blue: #555971;
  --color-nightshadow-blue-50: #f2f4ff;
  --color-nightshadow-blue-100: #e5e7f5;
  --color-nightshadow-blue-200: #d0d3e5;
  --color-nightshadow-blue-300: #b3b6cc;
  --color-nightshadow-blue-400: #989db6;
  --color-nightshadow-blue-500: #7f84a1;
  --color-nightshadow-blue-600: #6c7088;
  --color-nightshadow-blue-700: #56596d;
  --color-nightshadow-blue-800: #3e4150;
  --color-nightshadow-blue-900: #2b2d38;
  --color-nightshadow-blue-950: #181a22;
}

SCSS

$nightshadow-blue: #555971;
$nightshadow-blue-rgb: 85, 89, 113;
$nightshadow-blue-light: mix(#fff, $nightshadow-blue, 20%);
$nightshadow-blue-dark: mix(#000, $nightshadow-blue, 20%);

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