Dark Space

CSS

:root {
  --dark-space: #414a4c;
  --dark-space-rgb: 65 74 76;
  --dark-space-oklch: oklch(0.402 0.012 212.6);
}

.element {
  color: var(--dark-space);
  background-color: hsl(191 8% 28%);
  border-color: oklch(0.402 0.012 212.6);
}

Tailwind CSS v4

@theme {
  --color-dark-space: #414a4c;
  --color-dark-space-50: #f1f6f7;
  --color-dark-space-100: #e4e9ea;
  --color-dark-space-200: #cfd6d7;
  --color-dark-space-300: #b1b9bb;
  --color-dark-space-400: #97a0a3;
  --color-dark-space-500: #7d888b;
  --color-dark-space-600: #6a7375;
  --color-dark-space-700: #555c5e;
  --color-dark-space-800: #3e4445;
  --color-dark-space-900: #2a2f2f;
  --color-dark-space-950: #181b1c;
}

SCSS

$dark-space: #414a4c;
$dark-space-rgb: 65, 74, 76;
$dark-space-light: mix(#fff, $dark-space, 20%);
$dark-space-dark: mix(#000, $dark-space, 20%);

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