Get up and Go

CSS

:root {
  --get-up-and-go: #1a9d49;
  --get-up-and-go-rgb: 26 157 73;
  --get-up-and-go-oklch: oklch(0.611 0.163 149.4);
}

.element {
  color: var(--get-up-and-go);
  background-color: hsl(142 72% 36%);
  border-color: oklch(0.611 0.163 149.4);
}

Tailwind CSS v4

@theme {
  --color-get-up-and-go: #1a9d49;
  --color-get-up-and-go-50: #d4ffde;
  --color-get-up-and-go-100: #c0f8cd;
  --color-get-up-and-go-200: #9fe9b1;
  --color-get-up-and-go-300: #73cf8d;
  --color-get-up-and-go-400: #4ab867;
  --color-get-up-and-go-500: #00a244;
  --color-get-up-and-go-600: #00893b;
  --color-get-up-and-go-700: #036e2e;
  --color-get-up-and-go-800: #09511d;
  --color-get-up-and-go-900: #073813;
  --color-get-up-and-go-950: #002305;
}

SCSS

$get-up-and-go: #1a9d49;
$get-up-and-go-rgb: 26, 157, 73;
$get-up-and-go-light: mix(#fff, $get-up-and-go, 20%);
$get-up-and-go-dark: mix(#000, $get-up-and-go, 20%);

.element {
  color: $get-up-and-go;
  box-shadow: 0 0 0 2px rgba($get-up-and-go, 0.35);
}