Free Green

CSS

:root {
  --free-green: #74a690;
  --free-green-rgb: 116 166 144;
  --free-green-oklch: oklch(0.683 0.063 165.5);
}

.element {
  color: var(--free-green);
  background-color: hsl(154 22% 55%);
  border-color: oklch(0.683 0.063 165.5);
}

Tailwind CSS v4

@theme {
  --color-free-green: #74a690;
  --color-free-green-50: #e5fbf1;
  --color-free-green-100: #d5efe4;
  --color-free-green-200: #bcddcf;
  --color-free-green-300: #99c2b1;
  --color-free-green-400: #7bab96;
  --color-free-green-500: #5d947c;
  --color-free-green-600: #4f7d69;
  --color-free-green-700: #3f6454;
  --color-free-green-800: #2d493c;
  --color-free-green-900: #1f3329;
  --color-free-green-950: #0e1f17;
}

SCSS

$free-green: #74a690;
$free-green-rgb: 116, 166, 144;
$free-green-light: mix(#fff, $free-green, 20%);
$free-green-dark: mix(#000, $free-green, 20%);

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