Sierra Madre

CSS

:root {
  --sierra-madre: #c2bcae;
  --sierra-madre-rgb: 194 188 174;
  --sierra-madre-oklch: oklch(0.796 0.02 87.5);
}

.element {
  color: var(--sierra-madre);
  background-color: hsl(42 14% 72%);
  border-color: oklch(0.796 0.02 87.5);
}

Tailwind CSS v4

@theme {
  --color-sierra-madre: #c2bcae;
  --color-sierra-madre-50: #f7f5ef;
  --color-sierra-madre-100: #eae8e0;
  --color-sierra-madre-200: #d8d4cb;
  --color-sierra-madre-300: #bbb7ac;
  --color-sierra-madre-400: #a39e91;
  --color-sierra-madre-500: #8c8677;
  --color-sierra-madre-600: #767165;
  --color-sierra-madre-700: #5f5a51;
  --color-sierra-madre-800: #46423a;
  --color-sierra-madre-900: #302e28;
  --color-sierra-madre-950: #1c1a16;
}

SCSS

$sierra-madre: #c2bcae;
$sierra-madre-rgb: 194, 188, 174;
$sierra-madre-light: mix(#fff, $sierra-madre, 20%);
$sierra-madre-dark: mix(#000, $sierra-madre, 20%);

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