Zipline Green

CSS

:root {
  --zipline-green: #838567;
  --zipline-green-rgb: 131 133 103;
  --zipline-green-oklch: oklch(0.607 0.043 110.8);
}

.element {
  color: var(--zipline-green);
  background-color: hsl(64 13% 46%);
  border-color: oklch(0.607 0.043 110.8);
}

Tailwind CSS v4

@theme {
  --color-zipline-green: #838567;
  --color-zipline-green-50: #f5f7e9;
  --color-zipline-green-100: #e8ead9;
  --color-zipline-green-200: #d4d7c2;
  --color-zipline-green-300: #b7baa1;
  --color-zipline-green-400: #9fa184;
  --color-zipline-green-500: #878968;
  --color-zipline-green-600: #727458;
  --color-zipline-green-700: #5b5d46;
  --color-zipline-green-800: #434432;
  --color-zipline-green-900: #2f2f22;
  --color-zipline-green-950: #1b1b11;
}

SCSS

$zipline-green: #838567;
$zipline-green-rgb: 131, 133, 103;
$zipline-green-light: mix(#fff, $zipline-green, 20%);
$zipline-green-dark: mix(#000, $zipline-green, 20%);

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