Chateau Brown

CSS

:root {
  --chateau-brown: #5b4b44;
  --chateau-brown-rgb: 91 75 68;
  --chateau-brown-oklch: oklch(0.427 0.025 45);
}

.element {
  color: var(--chateau-brown);
  background-color: hsl(18 14% 31%);
  border-color: oklch(0.427 0.025 45);
}

Tailwind CSS v4

@theme {
  --color-chateau-brown: #5b4b44;
  --color-chateau-brown-50: #fcf3ef;
  --color-chateau-brown-100: #efe6e1;
  --color-chateau-brown-200: #ded1cb;
  --color-chateau-brown-300: #c3b4ad;
  --color-chateau-brown-400: #ac9a93;
  --color-chateau-brown-500: #958179;
  --color-chateau-brown-600: #7e6e67;
  --color-chateau-brown-700: #655852;
  --color-chateau-brown-800: #4a403c;
  --color-chateau-brown-900: #332c29;
  --color-chateau-brown-950: #1f1917;
}

SCSS

$chateau-brown: #5b4b44;
$chateau-brown-rgb: 91, 75, 68;
$chateau-brown-light: mix(#fff, $chateau-brown, 20%);
$chateau-brown-dark: mix(#000, $chateau-brown, 20%);

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