Lazy Caterpillar

CSS

:root {
  --lazy-caterpillar: #e2e5c7;
  --lazy-caterpillar-rgb: 226 229 199;
  --lazy-caterpillar-oklch: oklch(0.912 0.04 111.8);
}

.element {
  color: var(--lazy-caterpillar);
  background-color: hsl(66 37% 84%);
  border-color: oklch(0.912 0.04 111.8);
}

Tailwind CSS v4

@theme {
  --color-lazy-caterpillar: #e2e5c7;
  --color-lazy-caterpillar-50: #f5f7ea;
  --color-lazy-caterpillar-100: #e7eadb;
  --color-lazy-caterpillar-200: #d4d6c3;
  --color-lazy-caterpillar-300: #b7baa3;
  --color-lazy-caterpillar-400: #9fa186;
  --color-lazy-caterpillar-500: #86896b;
  --color-lazy-caterpillar-600: #72745b;
  --color-lazy-caterpillar-700: #5b5d48;
  --color-lazy-caterpillar-800: #434434;
  --color-lazy-caterpillar-900: #2e2f23;
  --color-lazy-caterpillar-950: #1b1b12;
}

SCSS

$lazy-caterpillar: #e2e5c7;
$lazy-caterpillar-rgb: 226, 229, 199;
$lazy-caterpillar-light: mix(#fff, $lazy-caterpillar, 20%);
$lazy-caterpillar-dark: mix(#000, $lazy-caterpillar, 20%);

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