Mud Brown

CSS

:root {
  --mud-brown: #60460f;
  --mud-brown-rgb: 96 70 15;
  --mud-brown-oklch: oklch(0.412 0.077 81.4);
}

.element {
  color: var(--mud-brown);
  background-color: hsl(41 73% 22%);
  border-color: oklch(0.412 0.077 81.4);
}

Tailwind CSS v4

@theme {
  --color-mud-brown: #60460f;
  --color-mud-brown-50: #fff4dd;
  --color-mud-brown-100: #f4e6cb;
  --color-mud-brown-200: #e4d2af;
  --color-mud-brown-300: #cbb58b;
  --color-mud-brown-400: #b69a69;
  --color-mud-brown-500: #a08148;
  --color-mud-brown-600: #876d3d;
  --color-mud-brown-700: #6c5731;
  --color-mud-brown-800: #513f22;
  --color-mud-brown-900: #382c17;
  --color-mud-brown-950: #231908;
}

SCSS

$mud-brown: #60460f;
$mud-brown-rgb: 96, 70, 15;
$mud-brown-light: mix(#fff, $mud-brown, 20%);
$mud-brown-dark: mix(#000, $mud-brown, 20%);

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