Green-Eyed Monster

CSS

:root {
  --green-eyed-monster: #346e23;
  --green-eyed-monster-rgb: 52 110 35;
  --green-eyed-monster-oklch: oklch(0.482 0.124 139.3);
}

.element {
  color: var(--green-eyed-monster);
  background-color: hsl(106 52% 28%);
  border-color: oklch(0.482 0.124 139.3);
}

Tailwind CSS v4

@theme {
  --color-green-eyed-monster: #346e23;
  --color-green-eyed-monster-50: #e2ffde;
  --color-green-eyed-monster-100: #d2f3cd;
  --color-green-eyed-monster-200: #b7e2b1;
  --color-green-eyed-monster-300: #94c88c;
  --color-green-eyed-monster-400: #77b068;
  --color-green-eyed-monster-500: #579945;
  --color-green-eyed-monster-600: #4a823c;
  --color-green-eyed-monster-700: #3b682f;
  --color-green-eyed-monster-800: #2c4c1f;
  --color-green-eyed-monster-900: #1e3514;
  --color-green-eyed-monster-950: #0e2006;
}

SCSS

$green-eyed-monster: #346e23;
$green-eyed-monster-rgb: 52, 110, 35;
$green-eyed-monster-light: mix(#fff, $green-eyed-monster, 20%);
$green-eyed-monster-dark: mix(#000, $green-eyed-monster, 20%);

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