Emerald Rain

CSS

:root {
  --emerald-rain: #80c872;
  --emerald-rain-rgb: 128 200 114;
  --emerald-rain-oklch: oklch(0.765 0.139 140.4);
}

.element {
  color: var(--emerald-rain);
  background-color: hsl(110 44% 62%);
  border-color: oklch(0.765 0.139 140.4);
}

Tailwind CSS v4

@theme {
  --color-emerald-rain: #80c872;
  --color-emerald-rain-50: #dfffdc;
  --color-emerald-rain-100: #cef4ca;
  --color-emerald-rain-200: #b2e4ad;
  --color-emerald-rain-300: #8dca88;
  --color-emerald-rain-400: #6fb262;
  --color-emerald-rain-500: #4d9c3d;
  --color-emerald-rain-600: #428435;
  --color-emerald-rain-700: #34692a;
  --color-emerald-rain-800: #274d1a;
  --color-emerald-rain-900: #1a3611;
  --color-emerald-rain-950: #0b2104;
}

SCSS

$emerald-rain: #80c872;
$emerald-rain-rgb: 128, 200, 114;
$emerald-rain-light: mix(#fff, $emerald-rain, 20%);
$emerald-rain-dark: mix(#000, $emerald-rain, 20%);

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