European Pine

CSS

:root {
  --european-pine: #756556;
  --european-pine-rgb: 117 101 86;
  --european-pine-oklch: oklch(0.518 0.031 65.2);
}

.element {
  color: var(--european-pine);
  background-color: hsl(29 15% 40%);
  border-color: oklch(0.518 0.031 65.2);
}

Tailwind CSS v4

@theme {
  --color-european-pine: #756556;
  --color-european-pine-50: #fbf4ec;
  --color-european-pine-100: #efe6dd;
  --color-european-pine-200: #ddd2c7;
  --color-european-pine-300: #c2b5a7;
  --color-european-pine-400: #ac9b8c;
  --color-european-pine-500: #958271;
  --color-european-pine-600: #7e6e60;
  --color-european-pine-700: #65584d;
  --color-european-pine-800: #4a4038;
  --color-european-pine-900: #342c26;
  --color-european-pine-950: #1f1914;
}

SCSS

$european-pine: #756556;
$european-pine-rgb: 117, 101, 86;
$european-pine-light: mix(#fff, $european-pine, 20%);
$european-pine-dark: mix(#000, $european-pine, 20%);

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