#A05300

CSS

:root {
  --warm-brown: #a05300;
  --warm-brown-rgb: 160 83 0;
  --warm-brown-oklch: oklch(0.525 0.128 56.4);
}

.element {
  color: var(--warm-brown);
  background-color: hsl(31 100% 31%);
  border-color: oklch(0.525 0.128 56.4);
}

Tailwind CSS v4

@theme {
  --color-warm-brown: #a05300;
  --color-warm-brown-50: #ffedd2;
  --color-warm-brown-100: #ffdebe;
  --color-warm-brown-200: #fec79e;
  --color-warm-brown-300: #e9a774;
  --color-warm-brown-400: #d7894e;
  --color-warm-brown-500: #c46c1c;
  --color-warm-brown-600: #a65c1b;
  --color-warm-brown-700: #854916;
  --color-warm-brown-800: #63340f;
  --color-warm-brown-900: #462409;
  --color-warm-brown-950: #2d1200;
}

SCSS

$warm-brown: #a05300;
$warm-brown-rgb: 160, 83, 0;
$warm-brown-light: mix(#fff, $warm-brown, 20%);
$warm-brown-dark: mix(#000, $warm-brown, 20%);

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