Frontier Brown

CSS

:root {
  --frontier-brown: #9a8172;
  --frontier-brown-rgb: 154 129 114;
  --frontier-brown-oklch: oklch(0.622 0.038 52.7);
}

.element {
  color: var(--frontier-brown);
  background-color: hsl(22 17% 53%);
  border-color: oklch(0.622 0.038 52.7);
}

Tailwind CSS v4

@theme {
  --color-frontier-brown: #9a8172;
  --color-frontier-brown-50: #fef3eb;
  --color-frontier-brown-100: #f3e5dc;
  --color-frontier-brown-200: #e2d0c5;
  --color-frontier-brown-300: #c8b3a5;
  --color-frontier-brown-400: #b1998a;
  --color-frontier-brown-500: #9b806f;
  --color-frontier-brown-600: #836c5e;
  --color-frontier-brown-700: #69564b;
  --color-frontier-brown-800: #4e3f37;
  --color-frontier-brown-900: #362b25;
  --color-frontier-brown-950: #211914;
}

SCSS

$frontier-brown: #9a8172;
$frontier-brown-rgb: 154, 129, 114;
$frontier-brown-light: mix(#fff, $frontier-brown, 20%);
$frontier-brown-dark: mix(#000, $frontier-brown, 20%);

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