#87481E

CSS

:root {
  --otterly-brown: #87481e;
  --otterly-brown-rgb: 135 72 30;
  --otterly-brown-oklch: oklch(0.471 0.102 51.2);
}

.element {
  color: var(--otterly-brown);
  background-color: hsl(24 64% 32%);
  border-color: oklch(0.471 0.102 51.2);
}

Tailwind CSS v4

@theme {
  --color-otterly-brown: #87481e;
  --color-otterly-brown-50: #ffeedb;
  --color-otterly-brown-100: #ffdfc9;
  --color-otterly-brown-200: #f8c9ac;
  --color-otterly-brown-300: #e1a987;
  --color-otterly-brown-400: #cf8d66;
  --color-otterly-brown-500: #bb7143;
  --color-otterly-brown-600: #9e603a;
  --color-otterly-brown-700: #7f4d2e;
  --color-otterly-brown-800: #5e3721;
  --color-otterly-brown-900: #422616;
  --color-otterly-brown-950: #2a1407;
}

SCSS

$otterly-brown: #87481e;
$otterly-brown-rgb: 135, 72, 30;
$otterly-brown-light: mix(#fff, $otterly-brown, 20%);
$otterly-brown-dark: mix(#000, $otterly-brown, 20%);

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