Green Fingers

CSS

:root {
  --green-fingers: #297e6b;
  --green-fingers-rgb: 41 126 107;
  --green-fingers-oklch: oklch(0.537 0.086 175.1);
}

.element {
  color: var(--green-fingers);
  background-color: hsl(167 51% 33%);
  border-color: oklch(0.537 0.086 175.1);
}

Tailwind CSS v4

@theme {
  --color-green-fingers: #297e6b;
  --color-green-fingers-50: #dcfef5;
  --color-green-fingers-100: #cbf2e7;
  --color-green-fingers-200: #aee1d3;
  --color-green-fingers-300: #87c6b7;
  --color-green-fingers-400: #63af9c;
  --color-green-fingers-500: #3b9983;
  --color-green-fingers-600: #33816f;
  --color-green-fingers-700: #296759;
  --color-green-fingers-800: #1d4c40;
  --color-green-fingers-900: #13352c;
  --color-green-fingers-950: #042019;
}

SCSS

$green-fingers: #297e6b;
$green-fingers-rgb: 41, 126, 107;
$green-fingers-light: mix(#fff, $green-fingers, 20%);
$green-fingers-dark: mix(#000, $green-fingers, 20%);

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