Brown Suede

CSS

:root {
  --brown-suede: #5b4f41;
  --brown-suede-rgb: 91 79 65;
  --brown-suede-oklch: oklch(0.435 0.027 71.3);
}

.element {
  color: var(--brown-suede);
  background-color: hsl(32 17% 31%);
  border-color: oklch(0.435 0.027 71.3);
}

Tailwind CSS v4

@theme {
  --color-brown-suede: #5b4f41;
  --color-brown-suede-50: #faf4ed;
  --color-brown-suede-100: #eee7de;
  --color-brown-suede-200: #dcd3c8;
  --color-brown-suede-300: #c0b6a8;
  --color-brown-suede-400: #a99c8d;
  --color-brown-suede-500: #928473;
  --color-brown-suede-600: #7b6f61;
  --color-brown-suede-700: #63594e;
  --color-brown-suede-800: #494138;
  --color-brown-suede-900: #322d27;
  --color-brown-suede-950: #1e1a15;
}

SCSS

$brown-suede: #5b4f41;
$brown-suede-rgb: 91, 79, 65;
$brown-suede-light: mix(#fff, $brown-suede, 20%);
$brown-suede-dark: mix(#000, $brown-suede, 20%);

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