Saddle Brown

CSS

:root {
  --saddle-brown: #8b4513;
  --saddle-brown-rgb: 139 69 19;
  --saddle-brown-oklch: oklch(0.471 0.112 50.8);
}

.element {
  color: var(--saddle-brown);
  background-color: hsl(25 76% 31%);
  border-color: oklch(0.471 0.112 50.8);
}

Tailwind CSS v4

@theme {
  --color-saddle-brown: #8b4513;
  --color-saddle-brown-50: #ffedd8;
  --color-saddle-brown-100: #ffdec6;
  --color-saddle-brown-200: #fcc8a8;
  --color-saddle-brown-300: #e6a881;
  --color-saddle-brown-400: #d38a5f;
  --color-saddle-brown-500: #c06e3a;
  --color-saddle-brown-600: #a25d33;
  --color-saddle-brown-700: #824b28;
  --color-saddle-brown-800: #61351d;
  --color-saddle-brown-900: #442413;
  --color-saddle-brown-950: #2c1305;
}

SCSS

$saddle-brown: #8b4513;
$saddle-brown-rgb: 139, 69, 19;
$saddle-brown-light: mix(#fff, $saddle-brown, 20%);
$saddle-brown-dark: mix(#000, $saddle-brown, 20%);

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