Smoked Oak Brown

CSS

:root {
  --smoked-oak-brown: #573f16;
  --smoked-oak-brown-rgb: 87 63 22;
  --smoked-oak-brown-oklch: oklch(0.386 0.065 77.8);
}

.element {
  color: var(--smoked-oak-brown);
  background-color: hsl(38 60% 21%);
  border-color: oklch(0.386 0.065 77.8);
}

Tailwind CSS v4

@theme {
  --color-smoked-oak-brown: #573f16;
  --color-smoked-oak-brown-50: #fff4e1;
  --color-smoked-oak-brown-100: #f4e6d0;
  --color-smoked-oak-brown-200: #e3d2b5;
  --color-smoked-oak-brown-300: #c9b492;
  --color-smoked-oak-brown-400: #b49a73;
  --color-smoked-oak-brown-500: #9e8153;
  --color-smoked-oak-brown-600: #866d47;
  --color-smoked-oak-brown-700: #6b5739;
  --color-smoked-oak-brown-800: #503f28;
  --color-smoked-oak-brown-900: #372c1b;
  --color-smoked-oak-brown-950: #22190b;
}

SCSS

$smoked-oak-brown: #573f16;
$smoked-oak-brown-rgb: 87, 63, 22;
$smoked-oak-brown-light: mix(#fff, $smoked-oak-brown, 20%);
$smoked-oak-brown-dark: mix(#000, $smoked-oak-brown, 20%);

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