Mexican Sand

CSS

:root {
  --mexican-sand: #af9781;
  --mexican-sand-rgb: 175 151 129;
  --mexican-sand-oklch: oklch(0.692 0.042 64.6);
}

.element {
  color: var(--mexican-sand);
  background-color: hsl(29 22% 60%);
  border-color: oklch(0.692 0.042 64.6);
}

Tailwind CSS v4

@theme {
  --color-mexican-sand: #af9781;
  --color-mexican-sand-50: #fef3e9;
  --color-mexican-sand-100: #f2e5d9;
  --color-mexican-sand-200: #e1d1c2;
  --color-mexican-sand-300: #c7b4a1;
  --color-mexican-sand-400: #b19a85;
  --color-mexican-sand-500: #9a8169;
  --color-mexican-sand-600: #836d59;
  --color-mexican-sand-700: #695747;
  --color-mexican-sand-800: #4d3f33;
  --color-mexican-sand-900: #362c23;
  --color-mexican-sand-950: #211912;
}

SCSS

$mexican-sand: #af9781;
$mexican-sand-rgb: 175, 151, 129;
$mexican-sand-light: mix(#fff, $mexican-sand, 20%);
$mexican-sand-dark: mix(#000, $mexican-sand, 20%);

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