Placebo Green

CSS

:root {
  --placebo-green: #ebfcec;
  --placebo-green-rgb: 235 252 236;
  --placebo-green-oklch: oklch(0.974 0.028 147);
}

.element {
  color: var(--placebo-green);
  background-color: hsl(124 74% 95%);
  border-color: oklch(0.974 0.028 147);
}

Tailwind CSS v4

@theme {
  --color-placebo-green: #ebfcec;
  --color-placebo-green-50: #f0f7f1;
  --color-placebo-green-100: #e2ebe3;
  --color-placebo-green-200: #cdd8ce;
  --color-placebo-green-300: #aebcb0;
  --color-placebo-green-400: #94a395;
  --color-placebo-green-500: #7b8b7c;
  --color-placebo-green-600: #687669;
  --color-placebo-green-700: #535e54;
  --color-placebo-green-800: #3d453d;
  --color-placebo-green-900: #2a302a;
  --color-placebo-green-950: #171c17;
}

SCSS

$placebo-green: #ebfcec;
$placebo-green-rgb: 235, 252, 236;
$placebo-green-light: mix(#fff, $placebo-green, 20%);
$placebo-green-dark: mix(#000, $placebo-green, 20%);

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