Head in the Sand

CSS

:root {
  --head-in-the-sand: #ebe2de;
  --head-in-the-sand-rgb: 235 226 222;
  --head-in-the-sand-oklch: oklch(0.919 0.011 45.7);
}

.element {
  color: var(--head-in-the-sand);
  background-color: hsl(18 25% 90%);
  border-color: oklch(0.919 0.011 45.7);
}

Tailwind CSS v4

@theme {
  --color-head-in-the-sand: #ebe2de;
  --color-head-in-the-sand-50: #f8f4f2;
  --color-head-in-the-sand-100: #ebe7e5;
  --color-head-in-the-sand-200: #d8d3d0;
  --color-head-in-the-sand-300: #bcb6b2;
  --color-head-in-the-sand-400: #a49c99;
  --color-head-in-the-sand-500: #8d8480;
  --color-head-in-the-sand-600: #77706c;
  --color-head-in-the-sand-700: #5f5957;
  --color-head-in-the-sand-800: #46413f;
  --color-head-in-the-sand-900: #302d2c;
  --color-head-in-the-sand-950: #1d1a19;
}

SCSS

$head-in-the-sand: #ebe2de;
$head-in-the-sand-rgb: 235, 226, 222;
$head-in-the-sand-light: mix(#fff, $head-in-the-sand, 20%);
$head-in-the-sand-dark: mix(#000, $head-in-the-sand, 20%);

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