Sage Salt

CSS

:root {
  --sage-salt: #dbebde;
  --sage-salt-rgb: 219 235 222;
  --sage-salt-oklch: oklch(0.925 0.024 151.2);
}

.element {
  color: var(--sage-salt);
  background-color: hsl(131 29% 89%);
  border-color: oklch(0.925 0.024 151.2);
}

Tailwind CSS v4

@theme {
  --color-sage-salt: #dbebde;
  --color-sage-salt-50: #f0f7f2;
  --color-sage-salt-100: #e2eae4;
  --color-sage-salt-200: #cdd7cf;
  --color-sage-salt-300: #aebbb2;
  --color-sage-salt-400: #95a397;
  --color-sage-salt-500: #7b8b7e;
  --color-sage-salt-600: #68766b;
  --color-sage-salt-700: #535e55;
  --color-sage-salt-800: #3d453e;
  --color-sage-salt-900: #2a302b;
  --color-sage-salt-950: #171c18;
}

SCSS

$sage-salt: #dbebde;
$sage-salt-rgb: 219, 235, 222;
$sage-salt-light: mix(#fff, $sage-salt, 20%);
$sage-salt-dark: mix(#000, $sage-salt, 20%);

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