Blue Coal

CSS

:root {
  --blue-coal: #2b3040;
  --blue-coal-rgb: 43 48 64;
  --blue-coal-oklch: oklch(0.311 0.03 271.1);
}

.element {
  color: var(--blue-coal);
  background-color: hsl(226 20% 21%);
  border-color: oklch(0.311 0.03 271.1);
}

Tailwind CSS v4

@theme {
  --color-blue-coal: #2b3040;
  --color-blue-coal-50: #f2f5fe;
  --color-blue-coal-100: #e4e7f2;
  --color-blue-coal-200: #d0d4e1;
  --color-blue-coal-300: #b2b7c7;
  --color-blue-coal-400: #989eb1;
  --color-blue-coal-500: #7f869a;
  --color-blue-coal-600: #6b7183;
  --color-blue-coal-700: #565a69;
  --color-blue-coal-800: #3e424d;
  --color-blue-coal-900: #2b2e35;
  --color-blue-coal-950: #181a21;
}

SCSS

$blue-coal: #2b3040;
$blue-coal-rgb: 43, 48, 64;
$blue-coal-light: mix(#fff, $blue-coal, 20%);
$blue-coal-dark: mix(#000, $blue-coal, 20%);

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