Heavy Ochre

CSS

:root {
  --heavy-ochre: #9b753d;
  --heavy-ochre-rgb: 155 117 61;
  --heavy-ochre-oklch: oklch(0.588 0.088 75.3);
}

.element {
  color: var(--heavy-ochre);
  background-color: hsl(36 44% 42%);
  border-color: oklch(0.588 0.088 75.3);
}

Tailwind CSS v4

@theme {
  --color-heavy-ochre: #9b753d;
  --color-heavy-ochre-50: #fff3da;
  --color-heavy-ochre-100: #f9e5c8;
  --color-heavy-ochre-200: #ead0ab;
  --color-heavy-ochre-300: #d1b285;
  --color-heavy-ochre-400: #bd9762;
  --color-heavy-ochre-500: #a87d3e;
  --color-heavy-ochre-600: #8e6a36;
  --color-heavy-ochre-700: #72552b;
  --color-heavy-ochre-800: #553d1e;
  --color-heavy-ochre-900: #3b2a13;
  --color-heavy-ochre-950: #251805;
}

SCSS

$heavy-ochre: #9b753d;
$heavy-ochre-rgb: 155, 117, 61;
$heavy-ochre-light: mix(#fff, $heavy-ochre, 20%);
$heavy-ochre-dark: mix(#000, $heavy-ochre, 20%);

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