Spanish Leather

CSS

:root {
  --spanish-leather: #8e6a3f;
  --spanish-leather-rgb: 142 106 63;
  --spanish-leather-oklch: oklch(0.551 0.075 70.1);
}

.element {
  color: var(--spanish-leather);
  background-color: hsl(33 39% 40%);
  border-color: oklch(0.551 0.075 70.1);
}

Tailwind CSS v4

@theme {
  --color-spanish-leather: #8e6a3f;
  --color-spanish-leather-50: #fff2de;
  --color-spanish-leather-100: #f8e4cd;
  --color-spanish-leather-200: #e9d0b2;
  --color-spanish-leather-300: #d0b28e;
  --color-spanish-leather-400: #bb976d;
  --color-spanish-leather-500: #a67d4d;
  --color-spanish-leather-600: #8c6a42;
  --color-spanish-leather-700: #715534;
  --color-spanish-leather-800: #543d25;
  --color-spanish-leather-900: #3a2a19;
  --color-spanish-leather-950: #241809;
}

SCSS

$spanish-leather: #8e6a3f;
$spanish-leather-rgb: 142, 106, 63;
$spanish-leather-light: mix(#fff, $spanish-leather, 20%);
$spanish-leather-dark: mix(#000, $spanish-leather, 20%);

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