#0F1217

CSS

:root {
  --dark-rift: #0f1217;
  --dark-rift-rgb: 15 18 23;
  --dark-rift-oklch: oklch(0.181 0.011 260.6);
}

.element {
  color: var(--dark-rift);
  background-color: hsl(218 21% 7%);
  border-color: oklch(0.181 0.011 260.6);
}

Tailwind CSS v4

@theme {
  --color-dark-rift: #0f1217;
  --color-dark-rift-50: #f3f5f8;
  --color-dark-rift-100: #e6e8ec;
  --color-dark-rift-200: #d2d4d9;
  --color-dark-rift-300: #b4b7bd;
  --color-dark-rift-400: #9b9fa5;
  --color-dark-rift-500: #82868e;
  --color-dark-rift-600: #6e7278;
  --color-dark-rift-700: #585b60;
  --color-dark-rift-800: #404346;
  --color-dark-rift-900: #2c2e31;
  --color-dark-rift-950: #191b1d;
}

SCSS

$dark-rift: #0f1217;
$dark-rift-rgb: 15, 18, 23;
$dark-rift-light: mix(#fff, $dark-rift, 20%);
$dark-rift-dark: mix(#000, $dark-rift, 20%);

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