Stone Cypress Green

CSS

:root {
  --stone-cypress-green: #5f7d6c;
  --stone-cypress-green-rgb: 95 125 108;
  --stone-cypress-green-oklch: oklch(0.561 0.043 159.8);
}

.element {
  color: var(--stone-cypress-green);
  background-color: hsl(146 14% 43%);
  border-color: oklch(0.561 0.043 159.8);
}

Tailwind CSS v4

@theme {
  --color-stone-cypress-green: #5f7d6c;
  --color-stone-cypress-green-50: #ebf9f1;
  --color-stone-cypress-green-100: #dcede3;
  --color-stone-cypress-green-200: #c5dace;
  --color-stone-cypress-green-300: #a5bfb1;
  --color-stone-cypress-green-400: #89a796;
  --color-stone-cypress-green-500: #6e8f7c;
  --color-stone-cypress-green-600: #5d7969;
  --color-stone-cypress-green-700: #4a6154;
  --color-stone-cypress-green-800: #36473d;
  --color-stone-cypress-green-900: #25312a;
  --color-stone-cypress-green-950: #131d17;
}

SCSS

$stone-cypress-green: #5f7d6c;
$stone-cypress-green-rgb: 95, 125, 108;
$stone-cypress-green-light: mix(#fff, $stone-cypress-green, 20%);
$stone-cypress-green-dark: mix(#000, $stone-cypress-green, 20%);

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