Lightly Lime

CSS

:root {
  --lightly-lime: #f0eda8;
  --lightly-lime-rgb: 240 237 168;
  --lightly-lime-oklch: oklch(0.932 0.088 105.9);
}

.element {
  color: var(--lightly-lime);
  background-color: hsl(58 71% 80%);
  border-color: oklch(0.932 0.088 105.9);
}

Tailwind CSS v4

@theme {
  --color-lightly-lime: #f0eda8;
  --color-lightly-lime-50: #f7f8db;
  --color-lightly-lime-100: #eaebc9;
  --color-lightly-lime-200: #d7d8ad;
  --color-lightly-lime-300: #bbbb87;
  --color-lightly-lime-400: #a5a263;
  --color-lightly-lime-500: #8e8a3f;
  --color-lightly-lime-600: #787537;
  --color-lightly-lime-700: #605d2b;
  --color-lightly-lime-800: #47441d;
  --color-lightly-lime-900: #312f13;
  --color-lightly-lime-950: #1e1b05;
}

SCSS

$lightly-lime: #f0eda8;
$lightly-lime-rgb: 240, 237, 168;
$lightly-lime-light: mix(#fff, $lightly-lime, 20%);
$lightly-lime-dark: mix(#000, $lightly-lime, 20%);

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