Ochre Brown

CSS

:root {
  --ochre-brown: #9f7b3e;
  --ochre-brown-rgb: 159 123 62;
  --ochre-brown-oklch: oklch(0.605 0.091 78.8);
}

.element {
  color: var(--ochre-brown);
  background-color: hsl(38 44% 43%);
  border-color: oklch(0.605 0.091 78.8);
}

Tailwind CSS v4

@theme {
  --color-ochre-brown: #9f7b3e;
  --color-ochre-brown-50: #fff3d9;
  --color-ochre-brown-100: #f8e5c6;
  --color-ochre-brown-200: #e8d1a9;
  --color-ochre-brown-300: #cfb382;
  --color-ochre-brown-400: #bb985f;
  --color-ochre-brown-500: #a67e39;
  --color-ochre-brown-600: #8d6b32;
  --color-ochre-brown-700: #715627;
  --color-ochre-brown-800: #543e1b;
  --color-ochre-brown-900: #3b2b12;
  --color-ochre-brown-950: #251804;
}

SCSS

$ochre-brown: #9f7b3e;
$ochre-brown-rgb: 159, 123, 62;
$ochre-brown-light: mix(#fff, $ochre-brown, 20%);
$ochre-brown-dark: mix(#000, $ochre-brown, 20%);

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