Spanish Chestnut

CSS

:root {
  --spanish-chestnut: #7f5f52;
  --spanish-chestnut-rgb: 127 95 82;
  --spanish-chestnut-oklch: oklch(0.515 0.047 43.1);
}

.element {
  color: var(--spanish-chestnut);
  background-color: hsl(17 22% 41%);
  border-color: oklch(0.515 0.047 43.1);
}

Tailwind CSS v4

@theme {
  --color-spanish-chestnut: #7f5f52;
  --color-spanish-chestnut-50: #fff1ea;
  --color-spanish-chestnut-100: #f6e3db;
  --color-spanish-chestnut-200: #e6cfc4;
  --color-spanish-chestnut-300: #cdb1a4;
  --color-spanish-chestnut-400: #b79689;
  --color-spanish-chestnut-500: #a27d6e;
  --color-spanish-chestnut-600: #896a5d;
  --color-spanish-chestnut-700: #6d544a;
  --color-spanish-chestnut-800: #513d36;
  --color-spanish-chestnut-900: #382a25;
  --color-spanish-chestnut-950: #231813;
}

SCSS

$spanish-chestnut: #7f5f52;
$spanish-chestnut-rgb: 127, 95, 82;
$spanish-chestnut-light: mix(#fff, $spanish-chestnut, 20%);
$spanish-chestnut-dark: mix(#000, $spanish-chestnut, 20%);

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