Dry Brown

CSS

:root {
  --dry-brown: #968374;
  --dry-brown-rgb: 150 131 116;
  --dry-brown-oklch: oklch(0.623 0.032 60.5);
}

.element {
  color: var(--dry-brown);
  background-color: hsl(26 14% 52%);
  border-color: oklch(0.623 0.032 60.5);
}

Tailwind CSS v4

@theme {
  --color-dry-brown: #968374;
  --color-dry-brown-50: #fcf3ec;
  --color-dry-brown-100: #f0e6dd;
  --color-dry-brown-200: #dfd2c7;
  --color-dry-brown-300: #c4b4a7;
  --color-dry-brown-400: #ad9a8c;
  --color-dry-brown-500: #978271;
  --color-dry-brown-600: #7f6e60;
  --color-dry-brown-700: #66584d;
  --color-dry-brown-800: #4b4038;
  --color-dry-brown-900: #342c26;
  --color-dry-brown-950: #201914;
}

SCSS

$dry-brown: #968374;
$dry-brown-rgb: 150, 131, 116;
$dry-brown-light: mix(#fff, $dry-brown, 20%);
$dry-brown-dark: mix(#000, $dry-brown, 20%);

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