Pueblo Sand

CSS

:root {
  --pueblo-sand: #e7c3a4;
  --pueblo-sand-rgb: 231 195 164;
  --pueblo-sand-oklch: oklch(0.84 0.059 62.6);
}

.element {
  color: var(--pueblo-sand);
  background-color: hsl(28 58% 77%);
  border-color: oklch(0.84 0.059 62.6);
}

Tailwind CSS v4

@theme {
  --color-pueblo-sand: #e7c3a4;
  --color-pueblo-sand-50: #fff2e4;
  --color-pueblo-sand-100: #f6e4d4;
  --color-pueblo-sand-200: #e7d0bb;
  --color-pueblo-sand-300: #cdb299;
  --color-pueblo-sand-400: #b8977b;
  --color-pueblo-sand-500: #a27e5e;
  --color-pueblo-sand-600: #896b50;
  --color-pueblo-sand-700: #6e553f;
  --color-pueblo-sand-800: #523e2e;
  --color-pueblo-sand-900: #392a1f;
  --color-pueblo-sand-950: #23180f;
}

SCSS

$pueblo-sand: #e7c3a4;
$pueblo-sand-rgb: 231, 195, 164;
$pueblo-sand-light: mix(#fff, $pueblo-sand, 20%);
$pueblo-sand-dark: mix(#000, $pueblo-sand, 20%);

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