Lime Cream

CSS

:root {
  --lime-cream: #d0e3ad;
  --lime-cream-rgb: 208 227 173;
  --lime-cream-oklch: oklch(0.888 0.074 123.6);
}

.element {
  color: var(--lime-cream);
  background-color: hsl(81 49% 78%);
  border-color: oklch(0.888 0.074 123.6);
}

Tailwind CSS v4

@theme {
  --color-lime-cream: #d0e3ad;
  --color-lime-cream-50: #f0f9e3;
  --color-lime-cream-100: #e2edd2;
  --color-lime-cream-200: #ccdab8;
  --color-lime-cream-300: #aebf96;
  --color-lime-cream-400: #95a675;
  --color-lime-cream-500: #7c8f57;
  --color-lime-cream-600: #69794a;
  --color-lime-cream-700: #54613b;
  --color-lime-cream-800: #3e4629;
  --color-lime-cream-900: #2b311b;
  --color-lime-cream-950: #181d0c;
}

SCSS

$lime-cream: #d0e3ad;
$lime-cream-rgb: 208, 227, 173;
$lime-cream-light: mix(#fff, $lime-cream, 20%);
$lime-cream-dark: mix(#000, $lime-cream, 20%);

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