Bitter Sage

CSS

:root {
  --bitter-sage: #97a18d;
  --bitter-sage-rgb: 151 161 141;
  --bitter-sage-oklch: oklch(0.695 0.031 129);
}

.element {
  color: var(--bitter-sage);
  background-color: hsl(90 10% 59%);
  border-color: oklch(0.695 0.031 129);
}

Tailwind CSS v4

@theme {
  --color-bitter-sage: #97a18d;
  --color-bitter-sage-50: #f2f7ee;
  --color-bitter-sage-100: #e4eae0;
  --color-bitter-sage-200: #d0d7ca;
  --color-bitter-sage-300: #b2bbab;
  --color-bitter-sage-400: #99a28f;
  --color-bitter-sage-500: #808a75;
  --color-bitter-sage-600: #6c7563;
  --color-bitter-sage-700: #565e4f;
  --color-bitter-sage-800: #3f4439;
  --color-bitter-sage-900: #2c2f27;
  --color-bitter-sage-950: #191c15;
}

SCSS

$bitter-sage: #97a18d;
$bitter-sage-rgb: 151, 161, 141;
$bitter-sage-light: mix(#fff, $bitter-sage, 20%);
$bitter-sage-dark: mix(#000, $bitter-sage, 20%);

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