Southwestern Sand

CSS

:root {
  --southwestern-sand: #ede0ce;
  --southwestern-sand-rgb: 237 224 206;
  --southwestern-sand-oklch: oklch(0.912 0.028 76.2);
}

.element {
  color: var(--southwestern-sand);
  background-color: hsl(35 46% 87%);
  border-color: oklch(0.912 0.028 76.2);
}

Tailwind CSS v4

@theme {
  --color-southwestern-sand: #ede0ce;
  --color-southwestern-sand-50: #faf4ec;
  --color-southwestern-sand-100: #ede7de;
  --color-southwestern-sand-200: #dbd3c7;
  --color-southwestern-sand-300: #bfb6a8;
  --color-southwestern-sand-400: #a89d8d;
  --color-southwestern-sand-500: #918472;
  --color-southwestern-sand-600: #7b7061;
  --color-southwestern-sand-700: #62594d;
  --color-southwestern-sand-800: #484138;
  --color-southwestern-sand-900: #322d26;
  --color-southwestern-sand-950: #1e1a15;
}

SCSS

$southwestern-sand: #ede0ce;
$southwestern-sand-rgb: 237, 224, 206;
$southwestern-sand-light: mix(#fff, $southwestern-sand, 20%);
$southwestern-sand-dark: mix(#000, $southwestern-sand, 20%);

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