Blue Nights

CSS

:root {
  --blue-nights: #414657;
  --blue-nights-rgb: 65 70 87;
  --blue-nights-oklch: oklch(0.396 0.03 272.2);
}

.element {
  color: var(--blue-nights);
  background-color: hsl(226 14% 30%);
  border-color: oklch(0.396 0.03 272.2);
}

Tailwind CSS v4

@theme {
  --color-blue-nights: #414657;
  --color-blue-nights-50: #f2f5fe;
  --color-blue-nights-100: #e5e7f2;
  --color-blue-nights-200: #d0d4e1;
  --color-blue-nights-300: #b2b7c7;
  --color-blue-nights-400: #989eb0;
  --color-blue-nights-500: #7f859a;
  --color-blue-nights-600: #6c7182;
  --color-blue-nights-700: #565a68;
  --color-blue-nights-800: #3e424d;
  --color-blue-nights-900: #2b2e35;
  --color-blue-nights-950: #181a21;
}

SCSS

$blue-nights: #414657;
$blue-nights-rgb: 65, 70, 87;
$blue-nights-light: mix(#fff, $blue-nights, 20%);
$blue-nights-dark: mix(#000, $blue-nights, 20%);

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