Olive Ochre

CSS

:root {
  --olive-ochre: #837752;
  --olive-ochre-rgb: 131 119 82;
  --olive-ochre-oklch: oklch(0.571 0.055 92.2);
}

.element {
  color: var(--olive-ochre);
  background-color: hsl(45 23% 42%);
  border-color: oklch(0.571 0.055 92.2);
}

Tailwind CSS v4

@theme {
  --color-olive-ochre: #837752;
  --color-olive-ochre-50: #faf5e4;
  --color-olive-ochre-100: #eee8d4;
  --color-olive-ochre-200: #dcd4ba;
  --color-olive-ochre-300: #c0b798;
  --color-olive-ochre-400: #aa9e7a;
  --color-olive-ochre-500: #93855c;
  --color-olive-ochre-600: #7c714e;
  --color-olive-ochre-700: #635a3e;
  --color-olive-ochre-800: #4a422c;
  --color-olive-ochre-900: #332d1e;
  --color-olive-ochre-950: #1f1a0e;
}

SCSS

$olive-ochre: #837752;
$olive-ochre-rgb: 131, 119, 82;
$olive-ochre-light: mix(#fff, $olive-ochre, 20%);
$olive-ochre-dark: mix(#000, $olive-ochre, 20%);

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