Cactus Hill

CSS

:root {
  --cactus-hill: #b1a386;
  --cactus-hill-rgb: 177 163 134;
  --cactus-hill-oklch: oklch(0.72 0.043 85.2);
}

.element {
  color: var(--cactus-hill);
  background-color: hsl(40 22% 61%);
  border-color: oklch(0.72 0.043 85.2);
}

Tailwind CSS v4

@theme {
  --color-cactus-hill: #b1a386;
  --color-cactus-hill-50: #faf5e7;
  --color-cactus-hill-100: #eee7d8;
  --color-cactus-hill-200: #dcd4c0;
  --color-cactus-hill-300: #c1b69f;
  --color-cactus-hill-400: #aa9d82;
  --color-cactus-hill-500: #938465;
  --color-cactus-hill-600: #7d7056;
  --color-cactus-hill-700: #645a45;
  --color-cactus-hill-800: #4a4131;
  --color-cactus-hill-900: #332d21;
  --color-cactus-hill-950: #1f1a11;
}

SCSS

$cactus-hill: #b1a386;
$cactus-hill-rgb: 177, 163, 134;
$cactus-hill-light: mix(#fff, $cactus-hill, 20%);
$cactus-hill-dark: mix(#000, $cactus-hill, 20%);

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