Light Celery Stick

CSS

:root {
  --light-celery-stick: #d8f2dc;
  --light-celery-stick-rgb: 216 242 220;
  --light-celery-stick-oklch: oklch(0.936 0.04 149.8);
}

.element {
  color: var(--light-celery-stick);
  background-color: hsl(129 50% 90%);
  border-color: oklch(0.936 0.04 149.8);
}

Tailwind CSS v4

@theme {
  --color-light-celery-stick: #d8f2dc;
  --color-light-celery-stick-50: #edf9f0;
  --color-light-celery-stick-100: #dfece1;
  --color-light-celery-stick-200: #c8d9cc;
  --color-light-celery-stick-300: #a9bead;
  --color-light-celery-stick-400: #8ea592;
  --color-light-celery-stick-500: #748e78;
  --color-light-celery-stick-600: #627866;
  --color-light-celery-stick-700: #4e6051;
  --color-light-celery-stick-800: #39463b;
  --color-light-celery-stick-900: #273128;
  --color-light-celery-stick-950: #151d16;
}

SCSS

$light-celery-stick: #d8f2dc;
$light-celery-stick-rgb: 216, 242, 220;
$light-celery-stick-light: mix(#fff, $light-celery-stick, 20%);
$light-celery-stick-dark: mix(#000, $light-celery-stick, 20%);

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