Gratefully Grass

CSS

:root {
  --gratefully-grass: #71714e;
  --gratefully-grass-rgb: 113 113 78;
  --gratefully-grass-oklch: oklch(0.539 0.051 108);
}

.element {
  color: var(--gratefully-grass);
  background-color: hsl(60 18% 37%);
  border-color: oklch(0.539 0.051 108);
}

Tailwind CSS v4

@theme {
  --color-gratefully-grass: #71714e;
  --color-gratefully-grass-50: #f6f7e6;
  --color-gratefully-grass-100: #e8ead6;
  --color-gratefully-grass-200: #d5d7be;
  --color-gratefully-grass-300: #b8ba9c;
  --color-gratefully-grass-400: #a1a17e;
  --color-gratefully-grass-500: #898961;
  --color-gratefully-grass-600: #747453;
  --color-gratefully-grass-700: #5d5d42;
  --color-gratefully-grass-800: #44442f;
  --color-gratefully-grass-900: #2f2f20;
  --color-gratefully-grass-950: #1c1b0f;
}

SCSS

$gratefully-grass: #71714e;
$gratefully-grass-rgb: 113, 113, 78;
$gratefully-grass-light: mix(#fff, $gratefully-grass, 20%);
$gratefully-grass-dark: mix(#000, $gratefully-grass, 20%);

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