Pale Willow

CSS

:root {
  --pale-willow: #89ab98;
  --pale-willow-rgb: 137 171 152;
  --pale-willow-oklch: oklch(0.71 0.046 160.5);
}

.element {
  color: var(--pale-willow);
  background-color: hsl(146 17% 60%);
  border-color: oklch(0.71 0.046 160.5);
}

Tailwind CSS v4

@theme {
  --color-pale-willow: #89ab98;
  --color-pale-willow-50: #eafaf1;
  --color-pale-willow-100: #dbede3;
  --color-pale-willow-200: #c4dbce;
  --color-pale-willow-300: #a3bfb0;
  --color-pale-willow-400: #87a795;
  --color-pale-willow-500: #6b907c;
  --color-pale-willow-600: #5b7a69;
  --color-pale-willow-700: #496254;
  --color-pale-willow-800: #35473c;
  --color-pale-willow-900: #243129;
  --color-pale-willow-950: #131d17;
}

SCSS

$pale-willow: #89ab98;
$pale-willow-rgb: 137, 171, 152;
$pale-willow-light: mix(#fff, $pale-willow, 20%);
$pale-willow-dark: mix(#000, $pale-willow, 20%);

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