Mint Stone

CSS

:root {
  --mint-stone: #95b090;
  --mint-stone-rgb: 149 176 144;
  --mint-stone-oklch: oklch(0.728 0.054 140.7);
}

.element {
  color: var(--mint-stone);
  background-color: hsl(111 17% 63%);
  border-color: oklch(0.728 0.054 140.7);
}

Tailwind CSS v4

@theme {
  --color-mint-stone: #95b090;
  --color-mint-stone-50: #edf9eb;
  --color-mint-stone-100: #deeddc;
  --color-mint-stone-200: #c7dbc5;
  --color-mint-stone-300: #a8bfa6;
  --color-mint-stone-400: #8da789;
  --color-mint-stone-500: #738f6e;
  --color-mint-stone-600: #61795d;
  --color-mint-stone-700: #4e614a;
  --color-mint-stone-800: #394735;
  --color-mint-stone-900: #273124;
  --color-mint-stone-950: #151d13;
}

SCSS

$mint-stone: #95b090;
$mint-stone-rgb: 149, 176, 144;
$mint-stone-light: mix(#fff, $mint-stone, 20%);
$mint-stone-dark: mix(#000, $mint-stone, 20%);

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