Green Eggs and Ham

CSS

:root {
  --green-eggs-and-ham: #7cb68e;
  --green-eggs-and-ham-rgb: 124 182 142;
  --green-eggs-and-ham-oklch: oklch(0.725 0.084 153.8);
}

.element {
  color: var(--green-eggs-and-ham);
  background-color: hsl(139 28% 60%);
  border-color: oklch(0.725 0.084 153.8);
}

Tailwind CSS v4

@theme {
  --color-green-eggs-and-ham: #7cb68e;
  --color-green-eggs-and-ham-50: #e3fdeb;
  --color-green-eggs-and-ham-100: #d3f1dc;
  --color-green-eggs-and-ham-200: #b8e0c5;
  --color-green-eggs-and-ham-300: #95c5a5;
  --color-green-eggs-and-ham-400: #77ad88;
  --color-green-eggs-and-ham-500: #57976c;
  --color-green-eggs-and-ham-600: #4a7f5c;
  --color-green-eggs-and-ham-700: #3b6649;
  --color-green-eggs-and-ham-800: #2b4b34;
  --color-green-eggs-and-ham-900: #1d3423;
  --color-green-eggs-and-ham-950: #0d1f12;
}

SCSS

$green-eggs-and-ham: #7cb68e;
$green-eggs-and-ham-rgb: 124, 182, 142;
$green-eggs-and-ham-light: mix(#fff, $green-eggs-and-ham, 20%);
$green-eggs-and-ham-dark: mix(#000, $green-eggs-and-ham, 20%);

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