Bit of Lime

CSS

:root {
  --bit-of-lime: #e1e5ac;
  --bit-of-lime-rgb: 225 229 172;
  --bit-of-lime-oklch: oklch(0.905 0.074 111.1);
}

.element {
  color: var(--bit-of-lime);
  background-color: hsl(64 52% 79%);
  border-color: oklch(0.905 0.074 111.1);
}

Tailwind CSS v4

@theme {
  --color-bit-of-lime: #e1e5ac;
  --color-bit-of-lime-50: #f5f8e0;
  --color-bit-of-lime-100: #e7ebcf;
  --color-bit-of-lime-200: #d4d8b4;
  --color-bit-of-lime-300: #b7bc90;
  --color-bit-of-lime-400: #a0a36f;
  --color-bit-of-lime-500: #888b4f;
  --color-bit-of-lime-600: #737644;
  --color-bit-of-lime-700: #5c5e36;
  --color-bit-of-lime-800: #444525;
  --color-bit-of-lime-900: #2f2f19;
  --color-bit-of-lime-950: #1c1c0a;
}

SCSS

$bit-of-lime: #e1e5ac;
$bit-of-lime-rgb: 225, 229, 172;
$bit-of-lime-light: mix(#fff, $bit-of-lime, 20%);
$bit-of-lime-dark: mix(#000, $bit-of-lime, 20%);

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