Celery

CSS

:root {
  --celery: #b4c04c;
  --celery-rgb: 180 192 76;
  --celery-oklch: oklch(0.776 0.14 114.7);
}

.element {
  color: var(--celery);
  background-color: hsl(66 48% 53%);
  border-color: oklch(0.776 0.14 114.7);
}

Tailwind CSS v4

@theme {
  --color-celery: #b4c04c;
  --color-celery-50: #f2fbce;
  --color-celery-100: #e4efb9;
  --color-celery-200: #d0dc97;
  --color-celery-300: #b3c16b;
  --color-celery-400: #9da739;
  --color-celery-500: #858f00;
  --color-celery-600: #707900;
  --color-celery-700: #5a6100;
  --color-celery-800: #434700;
  --color-celery-900: #2f3100;
  --color-celery-950: #1b1d00;
}

SCSS

$celery: #b4c04c;
$celery-rgb: 180, 192, 76;
$celery-light: mix(#fff, $celery, 20%);
$celery-dark: mix(#000, $celery, 20%);

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