Pale Mint

CSS

:root {
  --pale-mint: #aac2a1;
  --pale-mint-rgb: 170 194 161;
  --pale-mint-oklch: oklch(0.787 0.053 137.2);
}

.element {
  color: var(--pale-mint);
  background-color: hsl(104 21% 70%);
  border-color: oklch(0.787 0.053 137.2);
}

Tailwind CSS v4

@theme {
  --color-pale-mint: #aac2a1;
  --color-pale-mint-50: #eef9eb;
  --color-pale-mint-100: #dfecdc;
  --color-pale-mint-200: #c9dac5;
  --color-pale-mint-300: #aabea5;
  --color-pale-mint-400: #90a688;
  --color-pale-mint-500: #768f6c;
  --color-pale-mint-600: #64795c;
  --color-pale-mint-700: #506149;
  --color-pale-mint-800: #3a4734;
  --color-pale-mint-900: #283124;
  --color-pale-mint-950: #161d12;
}

SCSS

$pale-mint: #aac2a1;
$pale-mint-rgb: 170, 194, 161;
$pale-mint-light: mix(#fff, $pale-mint, 20%);
$pale-mint-dark: mix(#000, $pale-mint, 20%);

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