Wild Thyme

CSS

:root {
  --wild-thyme: #7e9c6f;
  --wild-thyme-rgb: 126 156 111;
  --wild-thyme-oklch: oklch(0.658 0.073 135.4);
}

.element {
  color: var(--wild-thyme);
  background-color: hsl(100 19% 52%);
  border-color: oklch(0.658 0.073 135.4);
}

Tailwind CSS v4

@theme {
  --color-wild-thyme: #7e9c6f;
  --color-wild-thyme-50: #ecfae6;
  --color-wild-thyme-100: #ddeed6;
  --color-wild-thyme-200: #c6dcbe;
  --color-wild-thyme-300: #a6c19c;
  --color-wild-thyme-400: #8ca97d;
  --color-wild-thyme-500: #719160;
  --color-wild-thyme-600: #607b52;
  --color-wild-thyme-700: #4c6241;
  --color-wild-thyme-800: #38482e;
  --color-wild-thyme-900: #26321f;
  --color-wild-thyme-950: #151e0f;
}

SCSS

$wild-thyme: #7e9c6f;
$wild-thyme-rgb: 126, 156, 111;
$wild-thyme-light: mix(#fff, $wild-thyme, 20%);
$wild-thyme-dark: mix(#000, $wild-thyme, 20%);

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