Mesa Sand

CSS

:root {
  --mesa-sand: #dcb49d;
  --mesa-sand-rgb: 220 180 157;
  --mesa-sand-oklch: oklch(0.799 0.056 51.5);
}

.element {
  color: var(--mesa-sand);
  background-color: hsl(22 47% 74%);
  border-color: oklch(0.799 0.056 51.5);
}

Tailwind CSS v4

@theme {
  --color-mesa-sand: #dcb49d;
  --color-mesa-sand-50: #fff1e7;
  --color-mesa-sand-100: #f8e3d7;
  --color-mesa-sand-200: #e8cebe;
  --color-mesa-sand-300: #cfb09d;
  --color-mesa-sand-400: #ba9680;
  --color-mesa-sand-500: #a57c64;
  --color-mesa-sand-600: #8b6955;
  --color-mesa-sand-700: #705444;
  --color-mesa-sand-800: #533d31;
  --color-mesa-sand-900: #3a2a21;
  --color-mesa-sand-950: #241711;
}

SCSS

$mesa-sand: #dcb49d;
$mesa-sand-rgb: 220, 180, 157;
$mesa-sand-light: mix(#fff, $mesa-sand, 20%);
$mesa-sand-dark: mix(#000, $mesa-sand, 20%);

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