Deer Leather

CSS

:root {
  --deer-leather: #ac7434;
  --deer-leather-rgb: 172 116 52;
  --deer-leather-oklch: oklch(0.605 0.106 66.8);
}

.element {
  color: var(--deer-leather);
  background-color: hsl(32 54% 44%);
  border-color: oklch(0.605 0.106 66.8);
}

Tailwind CSS v4

@theme {
  --color-deer-leather: #ac7434;
  --color-deer-leather-50: #fff0d5;
  --color-deer-leather-100: #ffe2c2;
  --color-deer-leather-200: #f3cda4;
  --color-deer-leather-300: #dbae7b;
  --color-deer-leather-400: #c99257;
  --color-deer-leather-500: #b5772d;
  --color-deer-leather-600: #996528;
  --color-deer-leather-700: #7a5020;
  --color-deer-leather-800: #5b3a16;
  --color-deer-leather-900: #40280e;
  --color-deer-leather-950: #291502;
}

SCSS

$deer-leather: #ac7434;
$deer-leather-rgb: 172, 116, 52;
$deer-leather-light: mix(#fff, $deer-leather, 20%);
$deer-leather-dark: mix(#000, $deer-leather, 20%);

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