Limited Lime

CSS

:root {
  --limited-lime: #eaecb9;
  --limited-lime-rgb: 234 236 185;
  --limited-lime-oklch: oklch(0.929 0.066 109.5);
}

.element {
  color: var(--limited-lime);
  background-color: hsl(62 57% 83%);
  border-color: oklch(0.929 0.066 109.5);
}

Tailwind CSS v4

@theme {
  --color-limited-lime: #eaecb9;
  --color-limited-lime-50: #f5f7e2;
  --color-limited-lime-100: #e8ead1;
  --color-limited-lime-200: #d5d8b7;
  --color-limited-lime-300: #b8bb94;
  --color-limited-lime-400: #a1a274;
  --color-limited-lime-500: #898a55;
  --color-limited-lime-600: #747549;
  --color-limited-lime-700: #5d5e3a;
  --color-limited-lime-800: #454429;
  --color-limited-lime-900: #2f2f1b;
  --color-limited-lime-950: #1c1c0c;
}

SCSS

$limited-lime: #eaecb9;
$limited-lime-rgb: 234, 236, 185;
$limited-lime-light: mix(#fff, $limited-lime, 20%);
$limited-lime-dark: mix(#000, $limited-lime, 20%);

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