Cactus Sand

CSS

:root {
  --cactus-sand: #9c9369;
  --cactus-sand-rgb: 156 147 105;
  --cactus-sand-oklch: oklch(0.66 0.059 97.5);
}

.element {
  color: var(--cactus-sand);
  background-color: hsl(49 20% 51%);
  border-color: oklch(0.66 0.059 97.5);
}

Tailwind CSS v4

@theme {
  --color-cactus-sand: #9c9369;
  --color-cactus-sand-50: #f9f6e3;
  --color-cactus-sand-100: #ece9d3;
  --color-cactus-sand-200: #dad5b9;
  --color-cactus-sand-300: #beb996;
  --color-cactus-sand-400: #a89f77;
  --color-cactus-sand-500: #918759;
  --color-cactus-sand-600: #7a724b;
  --color-cactus-sand-700: #625b3c;
  --color-cactus-sand-800: #49422a;
  --color-cactus-sand-900: #322e1d;
  --color-cactus-sand-950: #1e1b0d;
}

SCSS

$cactus-sand: #9c9369;
$cactus-sand-rgb: 156, 147, 105;
$cactus-sand-light: mix(#fff, $cactus-sand, 20%);
$cactus-sand-dark: mix(#000, $cactus-sand, 20%);

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