Green With Envy

CSS

:root {
  --green-with-envy: #22bb33;
  --green-with-envy-rgb: 34 187 51;
  --green-with-envy-oklch: oklch(0.691 0.212 144);
}

.element {
  color: var(--green-with-envy);
  background-color: hsl(127 69% 43%);
  border-color: oklch(0.691 0.212 144);
}

Tailwind CSS v4

@theme {
  --color-green-with-envy: #22bb33;
  --color-green-with-envy-50: #cfffd1;
  --color-green-with-envy-100: #bafcbd;
  --color-green-with-envy-200: #96ed9c;
  --color-green-with-envy-300: #65d371;
  --color-green-with-envy-400: #35bd3f;
  --color-green-with-envy-500: #00a600;
  --color-green-with-envy-600: #008d00;
  --color-green-with-envy-700: #007100;
  --color-green-with-envy-800: #005300;
  --color-green-with-envy-900: #003a00;
  --color-green-with-envy-950: #002400;
}

SCSS

$green-with-envy: #22bb33;
$green-with-envy-rgb: 34, 187, 51;
$green-with-envy-light: mix(#fff, $green-with-envy, 20%);
$green-with-envy-dark: mix(#000, $green-with-envy, 20%);

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