Celery Stick

CSS

:root {
  --celery-stick: #caedd0;
  --celery-stick-rgb: 202 237 208;
  --celery-stick-oklch: oklch(0.913 0.054 150.1);
}

.element {
  color: var(--celery-stick);
  background-color: hsl(130 49% 86%);
  border-color: oklch(0.913 0.054 150.1);
}

Tailwind CSS v4

@theme {
  --color-celery-stick: #caedd0;
  --color-celery-stick-50: #eafaee;
  --color-celery-stick-100: #dbeddf;
  --color-celery-stick-200: #c4dbc9;
  --color-celery-stick-300: #a4c0aa;
  --color-celery-stick-400: #88a88e;
  --color-celery-stick-500: #6d9174;
  --color-celery-stick-600: #5c7a62;
  --color-celery-stick-700: #4a624e;
  --color-celery-stick-800: #364838;
  --color-celery-stick-900: #253226;
  --color-celery-stick-950: #131e15;
}

SCSS

$celery-stick: #caedd0;
$celery-stick-rgb: 202, 237, 208;
$celery-stick-light: mix(#fff, $celery-stick, 20%);
$celery-stick-dark: mix(#000, $celery-stick, 20%);

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