Trailing Vine

CSS

:root {
  --trailing-vine: #cfd5a7;
  --trailing-vine-rgb: 207 213 167;
  --trailing-vine-oklch: oklch(0.857 0.062 113.7);
}

.element {
  color: var(--trailing-vine);
  background-color: hsl(68 35% 75%);
  border-color: oklch(0.857 0.062 113.7);
}

Tailwind CSS v4

@theme {
  --color-trailing-vine: #cfd5a7;
  --color-trailing-vine-50: #f4f8e4;
  --color-trailing-vine-100: #e6ebd4;
  --color-trailing-vine-200: #d2d8ba;
  --color-trailing-vine-300: #b5bc98;
  --color-trailing-vine-400: #9ea379;
  --color-trailing-vine-500: #858b5b;
  --color-trailing-vine-600: #71764e;
  --color-trailing-vine-700: #5a5e3e;
  --color-trailing-vine-800: #43452c;
  --color-trailing-vine-900: #2e2f1d;
  --color-trailing-vine-950: #1b1c0d;
}

SCSS

$trailing-vine: #cfd5a7;
$trailing-vine-rgb: 207, 213, 167;
$trailing-vine-light: mix(#fff, $trailing-vine, 20%);
$trailing-vine-dark: mix(#000, $trailing-vine, 20%);

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