Polished Brown

CSS

:root {
  --polished-brown: #985538;
  --polished-brown-rgb: 152 85 56;
  --polished-brown-oklch: oklch(0.522 0.099 43.6);
}

.element {
  color: var(--polished-brown);
  background-color: hsl(18 46% 41%);
  border-color: oklch(0.522 0.099 43.6);
}

Tailwind CSS v4

@theme {
  --color-polished-brown: #985538;
  --color-polished-brown-50: #ffedde;
  --color-polished-brown-100: #ffdecd;
  --color-polished-brown-200: #f9c8b2;
  --color-polished-brown-300: #e3a88d;
  --color-polished-brown-400: #d08b6e;
  --color-polished-brown-500: #bc6f4e;
  --color-polished-brown-600: #9f5e43;
  --color-polished-brown-700: #804b35;
  --color-polished-brown-800: #5f3626;
  --color-polished-brown-900: #43251a;
  --color-polished-brown-950: #2b130a;
}

SCSS

$polished-brown: #985538;
$polished-brown-rgb: 152, 85, 56;
$polished-brown-light: mix(#fff, $polished-brown, 20%);
$polished-brown-dark: mix(#000, $polished-brown, 20%);

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