#2A220F

CSS

:root {
  --noir-mystique: #2a220f;
  --noir-mystique-rgb: 42 34 15;
  --noir-mystique-oklch: oklch(0.256 0.034 87.2);
}

.element {
  color: var(--noir-mystique);
  background-color: hsl(42 47% 11%);
  border-color: oklch(0.256 0.034 87.2);
}

Tailwind CSS v4

@theme {
  --color-noir-mystique: #2a220f;
  --color-noir-mystique-50: #f9f5eb;
  --color-noir-mystique-100: #ece8db;
  --color-noir-mystique-200: #dad4c4;
  --color-noir-mystique-300: #beb7a4;
  --color-noir-mystique-400: #a79e88;
  --color-noir-mystique-500: #90856d;
  --color-noir-mystique-600: #7a715c;
  --color-noir-mystique-700: #615a4a;
  --color-noir-mystique-800: #484235;
  --color-noir-mystique-900: #322d24;
  --color-noir-mystique-950: #1e1a13;
}

SCSS

$noir-mystique: #2a220f;
$noir-mystique-rgb: 42, 34, 15;
$noir-mystique-light: mix(#fff, $noir-mystique, 20%);
$noir-mystique-dark: mix(#000, $noir-mystique, 20%);

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