Habitat

CSS

:root {
  --habitat: #897d6d;
  --habitat-rgb: 137 125 109;
  --habitat-oklch: oklch(0.596 0.028 75.1);
}

.element {
  color: var(--habitat);
  background-color: hsl(34 11% 48%);
  border-color: oklch(0.596 0.028 75.1);
}

Tailwind CSS v4

@theme {
  --color-habitat: #897d6d;
  --color-habitat-50: #faf4ed;
  --color-habitat-100: #ede7de;
  --color-habitat-200: #dbd3c7;
  --color-habitat-300: #c0b6a8;
  --color-habitat-400: #a89c8d;
  --color-habitat-500: #918472;
  --color-habitat-600: #7b7061;
  --color-habitat-700: #62594d;
  --color-habitat-800: #484138;
  --color-habitat-900: #322d26;
  --color-habitat-950: #1e1a15;
}

SCSS

$habitat: #897d6d;
$habitat-rgb: 137, 125, 109;
$habitat-light: mix(#fff, $habitat, 20%);
$habitat-dark: mix(#000, $habitat, 20%);

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