Gothic Olive

CSS

:root {
  --gothic-olive: #857555;
  --gothic-olive-rgb: 133 117 85;
  --gothic-olive-oklch: oklch(0.569 0.05 84.3);
}

.element {
  color: var(--gothic-olive);
  background-color: hsl(40 22% 43%);
  border-color: oklch(0.569 0.05 84.3);
}

Tailwind CSS v4

@theme {
  --color-gothic-olive: #857555;
  --color-gothic-olive-50: #fbf5e5;
  --color-gothic-olive-100: #efe7d5;
  --color-gothic-olive-200: #ded3bd;
  --color-gothic-olive-300: #c3b69b;
  --color-gothic-olive-400: #ac9d7d;
  --color-gothic-olive-500: #968460;
  --color-gothic-olive-600: #7f7052;
  --color-gothic-olive-700: #655941;
  --color-gothic-olive-800: #4b412e;
  --color-gothic-olive-900: #342d1f;
  --color-gothic-olive-950: #201a0f;
}

SCSS

$gothic-olive: #857555;
$gothic-olive-rgb: 133, 117, 85;
$gothic-olive-light: mix(#fff, $gothic-olive, 20%);
$gothic-olive-dark: mix(#000, $gothic-olive, 20%);

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