Salsify Grass

CSS

:root {
  --salsify-grass: #2bb179;
  --salsify-grass-rgb: 43 177 121;
  --salsify-grass-oklch: oklch(0.677 0.14 160.2);
}

.element {
  color: var(--salsify-grass);
  background-color: hsl(155 61% 43%);
  border-color: oklch(0.677 0.14 160.2);
}

Tailwind CSS v4

@theme {
  --color-salsify-grass: #2bb179;
  --color-salsify-grass-50: #d2ffe9;
  --color-salsify-grass-100: #bef7da;
  --color-salsify-grass-200: #9ce7c2;
  --color-salsify-grass-300: #6ecea2;
  --color-salsify-grass-400: #40b782;
  --color-salsify-grass-500: #00a165;
  --color-salsify-grass-600: #008856;
  --color-salsify-grass-700: #006d44;
  --color-salsify-grass-800: #00502f;
  --color-salsify-grass-900: #003820;
  --color-salsify-grass-950: #00220f;
}

SCSS

$salsify-grass: #2bb179;
$salsify-grass-rgb: 43, 177, 121;
$salsify-grass-light: mix(#fff, $salsify-grass, 20%);
$salsify-grass-dark: mix(#000, $salsify-grass, 20%);

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