#6DBC88

CSS

:root {
  --frog-pond: #6dbc88;
  --frog-pond-rgb: 109 188 136;
  --frog-pond-oklch: oklch(0.73 0.109 154);
}

.element {
  color: var(--frog-pond);
  background-color: hsl(141 37% 58%);
  border-color: oklch(0.73 0.109 154);
}

Tailwind CSS v4

@theme {
  --color-frog-pond: #6dbc88;
  --color-frog-pond-50: #ddffe8;
  --color-frog-pond-100: #ccf3d9;
  --color-frog-pond-200: #afe3c1;
  --color-frog-pond-300: #89c9a0;
  --color-frog-pond-400: #67b181;
  --color-frog-pond-500: #419b64;
  --color-frog-pond-600: #388355;
  --color-frog-pond-700: #2d6944;
  --color-frog-pond-800: #214d2f;
  --color-frog-pond-900: #163620;
  --color-frog-pond-950: #07210f;
}

SCSS

$frog-pond: #6dbc88;
$frog-pond-rgb: 109, 188, 136;
$frog-pond-light: mix(#fff, $frog-pond, 20%);
$frog-pond-dark: mix(#000, $frog-pond, 20%);

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