Hanging Gardens of Babylon

CSS

:root {
  --hanging-gardens-of-babylon: #11aa44;
  --hanging-gardens-of-babylon-rgb: 17 170 68;
  --hanging-gardens-of-babylon-oklch: oklch(0.645 0.184 147.6);
}

.element {
  color: var(--hanging-gardens-of-babylon);
  background-color: hsl(140 82% 37%);
  border-color: oklch(0.645 0.184 147.6);
}

Tailwind CSS v4

@theme {
  --color-hanging-gardens-of-babylon: #11aa44;
  --color-hanging-gardens-of-babylon-50: #d1ffd9;
  --color-hanging-gardens-of-babylon-100: #bdfac7;
  --color-hanging-gardens-of-babylon-200: #9aebaa;
  --color-hanging-gardens-of-babylon-300: #6ad183;
  --color-hanging-gardens-of-babylon-400: #3dbb5a;
  --color-hanging-gardens-of-babylon-500: #00a430;
  --color-hanging-gardens-of-babylon-600: #008b2b;
  --color-hanging-gardens-of-babylon-700: #006f22;
  --color-hanging-gardens-of-babylon-800: #005212;
  --color-hanging-gardens-of-babylon-900: #00390c;
  --color-hanging-gardens-of-babylon-950: #002301;
}

SCSS

$hanging-gardens-of-babylon: #11aa44;
$hanging-gardens-of-babylon-rgb: 17, 170, 68;
$hanging-gardens-of-babylon-light: mix(#fff, $hanging-gardens-of-babylon, 20%);
$hanging-gardens-of-babylon-dark: mix(#000, $hanging-gardens-of-babylon, 20%);

.element {
  color: $hanging-gardens-of-babylon;
  box-shadow: 0 0 0 2px rgba($hanging-gardens-of-babylon, 0.35);
}