Lemon Gate

CSS

:root {
  --lemon-gate: #96fbc4;
  --lemon-gate-rgb: 150 251 196;
  --lemon-gate-oklch: oklch(0.911 0.123 158.9);
}

.element {
  color: var(--lemon-gate);
  background-color: hsl(147 93% 79%);
  border-color: oklch(0.911 0.123 158.9);
}

Tailwind CSS v4

@theme {
  --color-lemon-gate: #96fbc4;
  --color-lemon-gate-50: #d8ffea;
  --color-lemon-gate-100: #c5f5db;
  --color-lemon-gate-200: #a6e5c3;
  --color-lemon-gate-300: #7ccba3;
  --color-lemon-gate-400: #55b484;
  --color-lemon-gate-500: #1e9e67;
  --color-lemon-gate-600: #1e8658;
  --color-lemon-gate-700: #186b46;
  --color-lemon-gate-800: #134f31;
  --color-lemon-gate-900: #0c3721;
  --color-lemon-gate-950: #002110;
}

SCSS

$lemon-gate: #96fbc4;
$lemon-gate-rgb: 150, 251, 196;
$lemon-gate-light: mix(#fff, $lemon-gate, 20%);
$lemon-gate-dark: mix(#000, $lemon-gate, 20%);

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