Antiquarian Brown

CSS

:root {
  --antiquarian-brown: #946644;
  --antiquarian-brown-rgb: 148 102 68;
  --antiquarian-brown-oklch: oklch(0.551 0.077 56.8);
}

.element {
  color: var(--antiquarian-brown);
  background-color: hsl(26 37% 42%);
  border-color: oklch(0.551 0.077 56.8);
}

Tailwind CSS v4

@theme {
  --color-antiquarian-brown: #946644;
  --color-antiquarian-brown-50: #fff0e0;
  --color-antiquarian-brown-100: #fce2cf;
  --color-antiquarian-brown-200: #eecdb4;
  --color-antiquarian-brown-300: #d6af91;
  --color-antiquarian-brown-400: #c29372;
  --color-antiquarian-brown-500: #ad7953;
  --color-antiquarian-brown-600: #926746;
  --color-antiquarian-brown-700: #755238;
  --color-antiquarian-brown-800: #573b28;
  --color-antiquarian-brown-900: #3d291b;
  --color-antiquarian-brown-950: #26160b;
}

SCSS

$antiquarian-brown: #946644;
$antiquarian-brown-rgb: 148, 102, 68;
$antiquarian-brown-light: mix(#fff, $antiquarian-brown, 20%);
$antiquarian-brown-dark: mix(#000, $antiquarian-brown, 20%);

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