Conservation

CSS

:root {
  --conservation: #796e54;
  --conservation-rgb: 121 110 84;
  --conservation-oklch: oklch(0.541 0.041 87.8);
}

.element {
  color: var(--conservation);
  background-color: hsl(42 18% 40%);
  border-color: oklch(0.541 0.041 87.8);
}

Tailwind CSS v4

@theme {
  --color-conservation: #796e54;
  --color-conservation-50: #faf5e8;
  --color-conservation-100: #ede8d9;
  --color-conservation-200: #dbd4c1;
  --color-conservation-300: #bfb7a0;
  --color-conservation-400: #a99d83;
  --color-conservation-500: #928567;
  --color-conservation-600: #7b7158;
  --color-conservation-700: #625a46;
  --color-conservation-800: #494232;
  --color-conservation-900: #322d22;
  --color-conservation-950: #1e1a11;
}

SCSS

$conservation: #796e54;
$conservation-rgb: 121, 110, 84;
$conservation-light: mix(#fff, $conservation, 20%);
$conservation-dark: mix(#000, $conservation, 20%);

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