Andes Ash

CSS

:root {
  --andes-ash: #c1a097;
  --andes-ash-rgb: 193 160 151;
  --andes-ash-oklch: oklch(0.733 0.041 35.7);
}

.element {
  color: var(--andes-ash);
  background-color: hsl(13 25% 67%);
  border-color: oklch(0.733 0.041 35.7);
}

Tailwind CSS v4

@theme {
  --color-andes-ash: #c1a097;
  --color-andes-ash-50: #fff1ed;
  --color-andes-ash-100: #f5e4de;
  --color-andes-ash-200: #e5cfc8;
  --color-andes-ash-300: #cbb1a8;
  --color-andes-ash-400: #b5968e;
  --color-andes-ash-500: #9f7d73;
  --color-andes-ash-600: #876a62;
  --color-andes-ash-700: #6c554e;
  --color-andes-ash-800: #503d39;
  --color-andes-ash-900: #372a27;
  --color-andes-ash-950: #221815;
}

SCSS

$andes-ash: #c1a097;
$andes-ash-rgb: 193, 160, 151;
$andes-ash-light: mix(#fff, $andes-ash, 20%);
$andes-ash-dark: mix(#000, $andes-ash, 20%);

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