Terrain

CSS

:root {
  --terrain: #708157;
  --terrain-rgb: 112 129 87;
  --terrain-oklch: oklch(0.578 0.064 126.2);
}

.element {
  color: var(--terrain);
  background-color: hsl(84 19% 42%);
  border-color: oklch(0.578 0.064 126.2);
}

Tailwind CSS v4

@theme {
  --color-terrain: #708157;
  --color-terrain-50: #f0f9e6;
  --color-terrain-100: #e1ecd6;
  --color-terrain-200: #ccdabd;
  --color-terrain-300: #aebe9b;
  --color-terrain-400: #95a67c;
  --color-terrain-500: #7b8e5f;
  --color-terrain-600: #687851;
  --color-terrain-700: #536040;
  --color-terrain-800: #3d462d;
  --color-terrain-900: #2a311f;
  --color-terrain-950: #181d0e;
}

SCSS

$terrain: #708157;
$terrain-rgb: 112, 129, 87;
$terrain-light: mix(#fff, $terrain, 20%);
$terrain-dark: mix(#000, $terrain, 20%);

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