Mud Ball

CSS

:root {
  --mud-ball: #966544;
  --mud-ball-rgb: 150 101 68;
  --mud-ball-oklch: oklch(0.551 0.079 54.3);
}

.element {
  color: var(--mud-ball);
  background-color: hsl(24 38% 43%);
  border-color: oklch(0.551 0.079 54.3);
}

Tailwind CSS v4

@theme {
  --color-mud-ball: #966544;
  --color-mud-ball-50: #fff0e0;
  --color-mud-ball-100: #fde2cf;
  --color-mud-ball-200: #f0ccb4;
  --color-mud-ball-300: #d8ae91;
  --color-mud-ball-400: #c49272;
  --color-mud-ball-500: #af7852;
  --color-mud-ball-600: #946546;
  --color-mud-ball-700: #775138;
  --color-mud-ball-800: #583a28;
  --color-mud-ball-900: #3e281b;
  --color-mud-ball-950: #27160b;
}

SCSS

$mud-ball: #966544;
$mud-ball-rgb: 150, 101, 68;
$mud-ball-light: mix(#fff, $mud-ball, 20%);
$mud-ball-dark: mix(#000, $mud-ball, 20%);

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