Wild Lime

CSS

:root {
  --wild-lime: #c4cd4f;
  --wild-lime-rgb: 196 205 79;
  --wild-lime-oklch: oklch(0.817 0.148 113.1);
}

.element {
  color: var(--wild-lime);
  background-color: hsl(64 56% 56%);
  border-color: oklch(0.817 0.148 113.1);
}

Tailwind CSS v4

@theme {
  --color-wild-lime: #c4cd4f;
  --color-wild-lime-50: #f3fbcb;
  --color-wild-lime-100: #e6eeb6;
  --color-wild-lime-200: #d2dc92;
  --color-wild-lime-300: #b5c063;
  --color-wild-lime-400: #9fa72c;
  --color-wild-lime-500: #888f00;
  --color-wild-lime-600: #737900;
  --color-wild-lime-700: #5c6100;
  --color-wild-lime-800: #454600;
  --color-wild-lime-900: #303100;
  --color-wild-lime-950: #1c1d00;
}

SCSS

$wild-lime: #c4cd4f;
$wild-lime-rgb: 196, 205, 79;
$wild-lime-light: mix(#fff, $wild-lime, 20%);
$wild-lime-dark: mix(#000, $wild-lime, 20%);

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