Mesa

CSS

:root {
  --mesa: #bca177;
  --mesa-rgb: 188 161 119;
  --mesa-oklch: oklch(0.723 0.065 78.4);
}

.element {
  color: var(--mesa);
  background-color: hsl(37 34% 60%);
  border-color: oklch(0.723 0.065 78.4);
}

Tailwind CSS v4

@theme {
  --color-mesa: #bca177;
  --color-mesa-50: #fff4e1;
  --color-mesa-100: #f3e6d0;
  --color-mesa-200: #e3d2b6;
  --color-mesa-300: #c9b492;
  --color-mesa-400: #b49a73;
  --color-mesa-500: #9e8153;
  --color-mesa-600: #856d47;
  --color-mesa-700: #6b5739;
  --color-mesa-800: #4f3f28;
  --color-mesa-900: #372c1b;
  --color-mesa-950: #22190b;
}

SCSS

$mesa: #bca177;
$mesa-rgb: 188, 161, 119;
$mesa-light: mix(#fff, $mesa, 20%);
$mesa-dark: mix(#000, $mesa, 20%);

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