Olive Tree

CSS

:root {
  --olive-tree: #aba77c;
  --olive-tree-rgb: 171 167 124;
  --olive-tree-oklch: oklch(0.721 0.059 103.3);
}

.element {
  color: var(--olive-tree);
  background-color: hsl(55 22% 58%);
  border-color: oklch(0.721 0.059 103.3);
}

Tailwind CSS v4

@theme {
  --color-olive-tree: #aba77c;
  --color-olive-tree-50: #f7f6e3;
  --color-olive-tree-100: #eae9d3;
  --color-olive-tree-200: #d7d6ba;
  --color-olive-tree-300: #bbba97;
  --color-olive-tree-400: #a4a078;
  --color-olive-tree-500: #8d885a;
  --color-olive-tree-600: #77734c;
  --color-olive-tree-700: #5f5c3d;
  --color-olive-tree-800: #47432b;
  --color-olive-tree-900: #312e1d;
  --color-olive-tree-950: #1d1b0d;
}

SCSS

$olive-tree: #aba77c;
$olive-tree-rgb: 171, 167, 124;
$olive-tree-light: mix(#fff, $olive-tree, 20%);
$olive-tree-dark: mix(#000, $olive-tree, 20%);

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