Pale Sage

CSS

:root {
  --pale-sage: #acbda1;
  --pale-sage-rgb: 172 189 161;
  --pale-sage-oklch: oklch(0.778 0.043 133);
}

.element {
  color: var(--pale-sage);
  background-color: hsl(96 18% 69%);
  border-color: oklch(0.778 0.043 133);
}

Tailwind CSS v4

@theme {
  --color-pale-sage: #acbda1;
  --color-pale-sage-50: #f0f8ec;
  --color-pale-sage-100: #e2ebdd;
  --color-pale-sage-200: #ccd9c6;
  --color-pale-sage-300: #aebda7;
  --color-pale-sage-400: #95a48a;
  --color-pale-sage-500: #7b8d6f;
  --color-pale-sage-600: #68775f;
  --color-pale-sage-700: #535f4b;
  --color-pale-sage-800: #3d4636;
  --color-pale-sage-900: #2a3025;
  --color-pale-sage-950: #181c14;
}

SCSS

$pale-sage: #acbda1;
$pale-sage-rgb: 172, 189, 161;
$pale-sage-light: mix(#fff, $pale-sage, 20%);
$pale-sage-dark: mix(#000, $pale-sage, 20%);

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