How Now

CSS

:root {
  --how-now: #886150;
  --how-now-rgb: 136 97 80;
  --how-now-oklch: oklch(0.529 0.057 44.5);
}

.element {
  color: var(--how-now);
  background-color: hsl(18 26% 42%);
  border-color: oklch(0.529 0.057 44.5);
}

Tailwind CSS v4

@theme {
  --color-how-now: #886150;
  --color-how-now-50: #fff1e8;
  --color-how-now-100: #f9e3d8;
  --color-how-now-200: #eacdc0;
  --color-how-now-300: #d1af9f;
  --color-how-now-400: #bc9483;
  --color-how-now-500: #a77a67;
  --color-how-now-600: #8d6857;
  --color-how-now-700: #715346;
  --color-how-now-800: #543c33;
  --color-how-now-900: #3a2922;
  --color-how-now-950: #241712;
}

SCSS

$how-now: #886150;
$how-now-rgb: 136, 97, 80;
$how-now-light: mix(#fff, $how-now, 20%);
$how-now-dark: mix(#000, $how-now, 20%);

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