Turtle Creek

CSS

:root {
  --turtle-creek: #65926d;
  --turtle-creek-rgb: 101 146 109;
  --turtle-creek-oklch: oklch(0.617 0.074 149.3);
}

.element {
  color: var(--turtle-creek);
  background-color: hsl(131 18% 48%);
  border-color: oklch(0.617 0.074 149.3);
}

Tailwind CSS v4

@theme {
  --color-turtle-creek: #65926d;
  --color-turtle-creek-50: #e7fceb;
  --color-turtle-creek-100: #d7efdc;
  --color-turtle-creek-200: #bedec5;
  --color-turtle-creek-300: #9cc3a5;
  --color-turtle-creek-400: #80ab87;
  --color-turtle-creek-500: #62946b;
  --color-turtle-creek-600: #537d5b;
  --color-turtle-creek-700: #436449;
  --color-turtle-creek-800: #314a33;
  --color-turtle-creek-900: #213323;
  --color-turtle-creek-950: #101f12;
}

SCSS

$turtle-creek: #65926d;
$turtle-creek-rgb: 101, 146, 109;
$turtle-creek-light: mix(#fff, $turtle-creek, 20%);
$turtle-creek-dark: mix(#000, $turtle-creek, 20%);

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