Old Leather

CSS

:root {
  --old-leather: #a88b66;
  --old-leather-rgb: 168 139 102;
  --old-leather-oklch: oklch(0.654 0.062 73.2);
}

.element {
  color: var(--old-leather);
  background-color: hsl(34 27% 53%);
  border-color: oklch(0.654 0.062 73.2);
}

Tailwind CSS v4

@theme {
  --color-old-leather: #a88b66;
  --color-old-leather-50: #fff3e2;
  --color-old-leather-100: #f4e5d2;
  --color-old-leather-200: #e4d1b7;
  --color-old-leather-300: #cab395;
  --color-old-leather-400: #b59976;
  --color-old-leather-500: #a08057;
  --color-old-leather-600: #876c4a;
  --color-old-leather-700: #6c573b;
  --color-old-leather-800: #503f2a;
  --color-old-leather-900: #382b1c;
  --color-old-leather-950: #22190d;
}

SCSS

$old-leather: #a88b66;
$old-leather-rgb: 168, 139, 102;
$old-leather-light: mix(#fff, $old-leather, 20%);
$old-leather-dark: mix(#000, $old-leather, 20%);

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