Eat Your Peas

CSS

:root {
  --eat-your-peas: #80987a;
  --eat-your-peas-rgb: 128 152 122;
  --eat-your-peas-oklch: oklch(0.653 0.051 139.4);
}

.element {
  color: var(--eat-your-peas);
  background-color: hsl(108 13% 54%);
  border-color: oklch(0.653 0.051 139.4);
}

Tailwind CSS v4

@theme {
  --color-eat-your-peas: #80987a;
  --color-eat-your-peas-50: #edf9eb;
  --color-eat-your-peas-100: #dfeddd;
  --color-eat-your-peas-200: #c9dac6;
  --color-eat-your-peas-300: #a9bea6;
  --color-eat-your-peas-400: #8fa689;
  --color-eat-your-peas-500: #758f6e;
  --color-eat-your-peas-600: #63795d;
  --color-eat-your-peas-700: #4f614b;
  --color-eat-your-peas-800: #3a4735;
  --color-eat-your-peas-900: #283124;
  --color-eat-your-peas-950: #161d13;
}

SCSS

$eat-your-peas: #80987a;
$eat-your-peas-rgb: 128, 152, 122;
$eat-your-peas-light: mix(#fff, $eat-your-peas, 20%);
$eat-your-peas-dark: mix(#000, $eat-your-peas, 20%);

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