Reddish Brown

CSS

:root {
  --reddish-brown: #7f2b0a;
  --reddish-brown-rgb: 127 43 10;
  --reddish-brown-oklch: oklch(0.41 0.123 38.9);
}

.element {
  color: var(--reddish-brown);
  background-color: hsl(17 85% 27%);
  border-color: oklch(0.41 0.123 38.9);
}

Tailwind CSS v4

@theme {
  --color-reddish-brown: #7f2b0a;
  --color-reddish-brown-50: #ffeadb;
  --color-reddish-brown-100: #ffdbc9;
  --color-reddish-brown-200: #ffc3ac;
  --color-reddish-brown-300: #eea286;
  --color-reddish-brown-400: #dc8467;
  --color-reddish-brown-500: #c96544;
  --color-reddish-brown-600: #aa563b;
  --color-reddish-brown-700: #89452f;
  --color-reddish-brown-800: #663122;
  --color-reddish-brown-900: #482116;
  --color-reddish-brown-950: #2e1008;
}

SCSS

$reddish-brown: #7f2b0a;
$reddish-brown-rgb: 127, 43, 10;
$reddish-brown-light: mix(#fff, $reddish-brown, 20%);
$reddish-brown-dark: mix(#000, $reddish-brown, 20%);

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