Go Go Lime

CSS

:root {
  --go-go-lime: #c6be6b;
  --go-go-lime-rgb: 198 190 107;
  --go-go-lime-oklch: oklch(0.79 0.105 103.7);
}

.element {
  color: var(--go-go-lime);
  background-color: hsl(55 44% 60%);
  border-color: oklch(0.79 0.105 103.7);
}

Tailwind CSS v4

@theme {
  --color-go-go-lime: #c6be6b;
  --color-go-go-lime-50: #f9f8d5;
  --color-go-go-lime-100: #ecebc2;
  --color-go-go-lime-200: #dad8a3;
  --color-go-go-lime-300: #bebb7b;
  --color-go-go-lime-400: #a9a154;
  --color-go-go-lime-500: #928927;
  --color-go-go-lime-600: #7c7423;
  --color-go-go-lime-700: #635d1c;
  --color-go-go-lime-800: #4a4311;
  --color-go-go-lime-900: #332f0b;
  --color-go-go-lime-950: #1f1b01;
}

SCSS

$go-go-lime: #c6be6b;
$go-go-lime-rgb: 198, 190, 107;
$go-go-lime-light: mix(#fff, $go-go-lime, 20%);
$go-go-lime-dark: mix(#000, $go-go-lime, 20%);

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