Thyme and Salt

CSS

:root {
  --thyme-and-salt: #629a31;
  --thyme-and-salt-rgb: 98 154 49;
  --thyme-and-salt-oklch: oklch(0.625 0.148 133.2);
}

.element {
  color: var(--thyme-and-salt);
  background-color: hsl(92 52% 40%);
  border-color: oklch(0.625 0.148 133.2);
}

Tailwind CSS v4

@theme {
  --color-thyme-and-salt: #629a31;
  --color-thyme-and-salt-50: #e3ffd5;
  --color-thyme-and-salt-100: #d3f4c2;
  --color-thyme-and-salt-200: #b9e3a3;
  --color-thyme-and-salt-300: #96c97a;
  --color-thyme-and-salt-400: #7ab150;
  --color-thyme-and-salt-500: #5c9a1d;
  --color-thyme-and-salt-600: #4e821d;
  --color-thyme-and-salt-700: #3e6817;
  --color-thyme-and-salt-800: #2f4c0a;
  --color-thyme-and-salt-900: #203507;
  --color-thyme-and-salt-950: #0f2000;
}

SCSS

$thyme-and-salt: #629a31;
$thyme-and-salt-rgb: 98, 154, 49;
$thyme-and-salt-light: mix(#fff, $thyme-and-salt, 20%);
$thyme-and-salt-dark: mix(#000, $thyme-and-salt, 20%);

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